公共代码抽离（代码分割）

• 单页面跟多页面都可使用，公共代码只需要下载一次就缓存起来了，避免了重复下载。可以参上xxxx,配置在 optimization.splitChunks 中,

//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {//分割代码块
            cacheGroups: {
                vendor: {
                    //第三方依赖
                    priority: 1, //设置优先级，首先抽离第三方模块
                    name: 'vendor',
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 1 //最少引入了1次
                },
                //缓存组
                common: {
                    //公共模块
                    chunks: 'initial',
                    name: 'common',
                    minSize: 100, //大小超过100个字节
                    minChunks: 3 //最少引入了3次
                }
            }
        }
    }
}
复制代码

element-ui 按需加载

• element-ui/lib 占1.75M，把element-ui 按需加载，体积减少到849.77k

但是需要在 babel.config.js文件中添加（vue cli3 中需要安装 babel-plugin-component）

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins:[      
        [        
            'component',        
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ]   
    ]
};

复制代码

之前 1.75M

优化 849.77k