2020-12-15 vue 项目打包优化之使用 CDN

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 部分大的离谱……

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/1db47d2d.html
版权声明：转载请注明出处！