webpack打包优化解决方案

工具：

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

1、路由懒加载

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

  

 

  
1
 

2、CDN引入外部扩展

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

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

  

 

  
1
 

webpack配置 externals

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

3、代码拆分

4、DLL方式抽离公共依赖

5、gZip 加速优化

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

6、生产环境关闭productionSourceMap

vue.config.js

productionSourceMap: false,

  

 

  
1
 

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/121980670