一、vue打包配置的详细说明【config/index.js的build部份】
index: path.resolve(__dirname, '../dist/index.html')
打包生成的文件路径
__dirname：代码所在路径，字符串格式
assetsRoot: path.resolve(__dirname, '../dist'),
包含应用程序的所有静态资产的根目录（绝对路径）
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的好处？
- 后端开启gzip，就会将相应文件压缩，浏览器就能识别，可以起到优化的效果（前提是后端得配合使用gzip，才有开启的必要）
- 使用gzip需要先安装依赖
npm install --save-dev compression-webpack-plugin - 开启的好处：
比如nginx给你返回js文件的时候，会判断是否开启gzip，然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同文件，有的话直接返回，nginx自己不再进行压缩处理。
而压缩是要时间的！不同级别的压缩率花的时间也不一样。
所以提前准备gz文件，可以更加优化。而且你可以把压缩率提高点，这样带宽消耗会更小
三、打包优化的一些整理
- 路由设置懒加载
- 关闭SourceMap
- 后端未使用Gzip时关闭
- 不是全局使用的共用组件，按需引入
- 在【build/webpack.base.conf.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')
],
},
- 查看打包报告，优化代码文件的占用率以及执行速度
npm run build --report
-
增加 webpack-parallel-uglify-plugin来替换原有的UglifyJsPlugin，下面是使用新的打包方式流程，但是由于webpack-parallel-uglify-plugin只支持ES5的语法，element-ui有部分ES6的东西，会导致打包出错，上网搜索了一下，可以参照【https://www.cnblogs.com/huen2015/p/10986580.html】这个博客解决，但是因为我们的项目还引用了G6实现流程图，这样解决还是无效，感觉没有必要因为单纯的提高打包速度而引入更多的依赖，因此最后弃置此打包优化方案！！
- 安装依赖
npm i webpack-parallel-uglify-plugin
- 在build/webpack.prod.conf.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
}
}),
