webpack打包优化解决方案

工具：

• webpack-bundle-analyzer 查看项目所有包及体积大小

1、路由懒加载

component: () => import('@/views/index'),

2、CDN引入外部扩展

国内CDN: https://www.bootcdn.cn/

webpack配置 externals

module.exports = {
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter'
        ...
    }
}

3、代码拆分

4、DLL方式抽离公共依赖

5、gZip 加速优化

vue-cli默认生产环境都会进行gZip压缩，Nginx也支持

6、生产环境关闭productionSourceMap

vue.config.js

productionSourceMap: false,

参考 webpack打包优化解决方案 Webpack 打包太慢? 试试 Dllplugin webpack打包性能优化之路 vue页面白屏的原因及优化