vue打包配置的详细说明【configindex.js的build部份】
⼀、vue打包配置的详细说明【config/index.js的build部份】
index: solve(__dirname,'../dist/index.html')
打包⽣成的⽂件路径
__dirname：代码所在路径，字符串格式
assetsRoot: solve(__dirname,'../dist'),
包含应⽤程序的所有静态资产的根⽬录（绝对路径）
vuejs流程图插件assetsSubDirectory:'static',
被编译之后的资源⽂件都会放在上⾯的assetsRoot中，因为本地缓存的静态资源，也就是代码⽬录static中的⽂件最好不要混淆在assetsRoot中，因此指定该⽬录；assetsRoot的路径是【E:\web\dist】那么assetsSubDirectory就是【E:\web\dist\static】
assetsPublicPath:'/',
这个是通过http服务器运⾏的url路径。在⼤多数情况下，这个是根⽬录(/)。如果你的后台框架对静态资源url前缀要求，你仅需要改变这个参数。在内部，这个是被webpack当做output.publicPath来处理的。
后台有要求的话⼀般要加上./ 或者根据具体⽬录添加，不然引⽤不到静态资源
productionSourceMap:false,
构建⽣成环境时是否⽣成源码⽂件，建议使⽤false可以⼤⼤减少打包⽂件的⼤⼩
productionGzip:false,
productionGzipExtensions:['js','css'],
⼆、是否打开Gzip以及什么情况下需要开启Gzip以及开启Gzip的好处？
1. 后端开启gzip，就会将相应⽂件压缩，浏览器就能识别，可以起到优化的效果（前提是后端得配合使⽤gzip，才有开启的必要）
2. 使⽤gzip需要先安装依赖
npm install --save-dev compression-webpack-plugin
3. 开启的好处：
⽐如nginx给你返回js⽂件的时候，会判断是否开启gzip，然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同⽂件，有的话直接返回，nginx⾃⼰不再进⾏压缩处理。
⽽压缩是要时间的！不同级别的压缩率花的时间也不⼀样。
所以提前准备gz⽂件，可以更加优化。⽽且你可以把压缩率提⾼点，这样带宽消耗会更⼩
三、打包优化的⼀些整理
1. 路由设置懒加载
2. 关闭SourceMap
3. 后端未使⽤Gzip时关闭
4. 不是全局使⽤的共⽤组件，按需引⼊
5. 在【build/f.js】⽂件中的resolve⽂件中添加modules，可以有效提⾼⼤型项⽬的打包时间，亲测打包时间缩短
了12s以上
resolve:{
extensions:['.js','.vue','.less','.css','.scss','.json'],
alias:{
'vue$':'vue/dist/vue.esm.js',
'@':resolve('src'),
'sysStatic':resolve('src/assets'),
'sysComponents':resolve('src/components'),
'sysPage':resolve('src/page'),
'jquery':'jquery',
'jquery-ui':'jquery-ui'
},
modules:[
resolve('src'),
resolve('node_modules')
],
},
6. 查看打包报告，优化代码⽂件的占⽤率以及执⾏速度
npm run build --report
7.
1. 安装依赖
npm i webpack-parallel-uglify-plugin
2. 在build/f.js ⽂件，做如下修改
⾸先注释掉本地应⽤的原有的uglifyJsPlugin，引⽤新的ParallelUglifyPlugin
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const ParallelUglifyPlugin =require("webpack-parallel-uglify-plugin")
其次，将现有的uglifyJsPlugin改为ParallelUglifyPlugin
// js mini
// new UglifyJsPlugin({
//  cache: true,
//  parallel: true,
//  sourceMap: config.build.productionSourceMap // set to true if you want JS source maps
/
/ }),
// 增加 webpack-parallel-uglify-plugin来替换原有的UglifyJsPlugin
new ParallelUglifyPlugin({
cacheDir:'.cache/',
uglifyJS:{
output:{
comments:false
},
compress:{
warnings:false
}
}
}),
百度时发现有些⼩伙伴使⽤该组件打包会报错，我这⾥没有报错，但是把解决⽅案贴⼀下吧，⽇后⾃⼰再出错也好~~ // 将：
compress:{
warnings:false
}
// 改为：
warnings:false
new ParallelUglifyPlugin({    cacheDir:'.cache/',
uglifyJS:{
output:{
comments:false },
warnings:false
}
}),

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。