vue 项目打包优化之使用 CDN

插件地址:https://github.com/shirotech/webpack-cdn-plugin

具体的使用如下:

const WebpackCdnPlugin = require('webpack-cdn-plugin');
module.exports = {
    // ...
    plugins: [new HtmlWebpackPlugin(), new WebpackCdnPlugin({
        modules: [{
            name: 'vue', // 包名称
            var: 'Vue', // 导出的变量名称
            path: 'dist/vue.runtime.min.js' //相对包的根路径,这个路径可以从 CDN 网站上看到
        },
        {
            name: 'vue-router',
            var: 'VueRouter',
            path: 'dist/vue-router.min.js'
        },
        {
            name: 'vuex',
            var: 'Vuex',
            path: 'dist/vuex.min.js'
        },
        {
            name: 'normalize.css',
            style: 'normalize.min.css',
            cssOnly: true, //如果是纯 css 包需要设置这个,否则报错
        }],
        publicPath: '/node_modules',
        // prodUrl: 'https://cdn.jsdelivr.net/npm/:name@:version/:path', //个人喜欢jsdelivr作为cdn,这里自定义cdn来源 // 由于 jsdelivr 已无法访问,使用默认的 unpkg 即可!!!
        prod: true,
        // 如果为 true,则从 CDN 加载,如果为 false,则从本地的 publicPath 下加载。
        //prod: process.env.NODE_ENV === 'production' 可以考虑设置成这样。
    })]
    // ...
};

由于本地开发时一般希望从 node_modules 加载资源,所以可以考虑以下使用方式:

const jsModules = [{
    name: 'lodash',
    var: '_',
    path: 'lodash.min.js',
},
{
    name: 'axios',
    var: 'axios',
    path: 'dist/axios.min.js',
},
{
    name: 'dayjs',
    var: 'dayjs',
    path: 'dayjs.min.js',
}]
// ....
new WebpackCdnPlugin({
    publicPath: '/node_modules',
    prod: true,
    modules: process.env.NODE_ENV === 'production' ? jsModules: [],
    // 仅生产环境使用 CDN ,开发时从本地加载
}),

另外提个小 bug 吧,也算是踩了个坑。

本项目中,我使用了 vuetify 作为 UI 框架,但是由于全量导入的话,包体积太大,因此考虑放到 cdn 上。但是我在设置了 externals 选项后依旧无效,经过排查,才发现是 vuetify-loader 的锅。这个插件的作用是对 vuetify 进行摇树优化,而摇树的结果就是 webpack 不认得 externals 选项了,因此卸载之后解决问题。

最后,解决方案有两个:1.如果要使用 cdn,则不选择摇树优化,移除 vuetify-loader 插件;2.如果要摇树优化,则安装 vuetify-loader 插件,不过会导致包体积大很多。根据之前的测试,js 部分略有所缩小, css 部分大的离谱……