webpack打包优化解决方案

2022-03-30 123 阅读1分钟

工具：

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

1、路由懒加载

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

2、CDN引入外部扩展

国内CDN: www.bootcdn.cn/

<script src="XXX/cdn/vue.min.js"></script>

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页面白屏的原因及优化