欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

(转):优化webpack打包vendor体积

程序员文章站 2022-05-31 09:16:38
...

转载自:https://segmentfault.com/q/1010000008832754

 

1.使用externals选项,使用script标签引用公共库

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

 

2.可利用,webpack.DllReferencePlugin webpack.DllReferencePlugin 将常用不怎么变更的文件,打入一个统一的文件,外链使用。这个主要作用也可用来缩小包构建的时间;

可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构,十分牛掰(最新 Vue-cli 带有此配置);在 package.json 中配置如下命令 npm run analyz,运行即可查看之:

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

对此可以分析研究,采取办法过滤掉重复的内容等... ... 其他还有诸如开启压缩啦,开启 Gzip 之类等等,来减小包的体积。