参考:https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
首先,在写 Vue 的时候,应该采用懒加载模式,之后生成的包,就会被打入到不同分组的 js,运行时按需加载,详情见:Vue-路由懒加载;这个意义重大!
const GetTrx = () => import('@/pages/single/getTrx/GetTrx');
//or
const GetTrx = resolve => require(['@/pages/single/getTrx/GetTrx'], resolve);
然后外部引入模块(CDN),然后在 webpack 配置中指定 externals
//index.html
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
//webpack.base.conf.js
externals:{
'vue': 'Vue',
'iview': "iView",
"axios": "axios"
},
vue-cli的webpack配置,应该是将所有的库打包到了vendor中,引用的库太多时,vendor的体积会很大,有办法控制打包的体积超过一定值时,分成多个文件打包吗?或者通过配置将部分库抽离出来,打包成另外的文件。
在做vue项目打包,打包之后js中,会自动生成一些map文件,怎么把它去掉不要呢?
运行 cnpm run build 开始打包后会在项目目录下自动创建dist目录,打包好的文件都在其中
解决办法:去src/config/index.js中改一个参数:
productionSourceMap:false
把这个改为false。不然在最终打包的文件中会出现一些map文件
map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
使用vue-cli生成的项目,会自动配好相关的设置。
到对应的文件,productionGzip改为true,开启Gzip压缩
解决办法:src/config/index.js中改一个参数:
productionGzip:true
webpack.prod.conf.js
CompressionWebpackPlugin的设置由
asset: '[path].gz[query]'
改为
filename: '[path].gz[query]'
需要后台开启支持gzip