跟著Vue-cli來'學(xué)'并'改'Webpack之 打包優(yōu)化
https://juejin.im/post/5a337a1f6fb9a0452b4949e0
http://git-lt.github.io/2018/04/12/webpack4/
1.修改/config/index.js文件
prod環(huán)境：productionSourceMap: false（關(guān)閉source-map，手動配置改成false,默認(rèn)true，減少打包體積，提高代碼安全性，防止別人看到你的源碼）
2.使用靜態(tài)資源或CDN資源
https://www.cnblogs.com/goloving/p/9170338.html
在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當(dāng)?shù)拇螅绊懯组_的體驗。
解決方法是，將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達(dá)到加速首開的目的。
在 webpack.config.js 中配置模塊變量為外部依賴
'vue' : 'Vue',
'vuex' : 'Vuex',
'vue-router' : 'VueRouter',
'element-ui' : 'Element',
'lodash' : '_',
'jquery' : 'jQuery',
'axios' : 'axios',
//屬性名jquery指的是 import $ from 'jquery'中的 'jquery'
屬性值 jQuery指的是jquery插件暴露出來的全局對象名。
在 index.html 中添加資源引用
<script src="http://cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="http://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="http://cdn.bootcss.com/element-ui/2.2.0/index.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
<script src="http://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
有時候，由于網(wǎng)絡(luò)限制，不允許使用CDN資源，又不想經(jīng)過Webpack打包，則可以將資源直接引入 index.html ,在 webpack build 配合 copy-webpack-plugin 插件，將資源復(fù)制到 dist 目錄下，例 vue-cli 生成的項目根目錄下的 static 目錄就是用來放這類靜態(tài)資源的。
3.為babel-loader設(shè)置緩存
cacheDirectory: 指定的目錄將用來緩存 loader 的執(zhí)行結(jié)果。之后的 webpack 構(gòu)建，將會嘗試讀取緩存，來避免在每次執(zhí)行時，可能產(chǎn)生的、高性能消耗的 Babel 重新編譯過程
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: /node_modules/,
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
4.生產(chǎn)環(huán)境是否開啟productionGzip，默認(rèn)為false,在config目錄下面的index.js文件中，開啟productionGzip，可以產(chǎn)出.gz后綴結(jié)尾的js文件，瀏覽器會優(yōu)先加載.gz后綴結(jié)尾的文件，如果瀏覽器不能識別，再加載正常的文件，當(dāng)然后臺nginx部署的時候也是可以實現(xiàn)gzip壓縮功能。需要值得注意的是，開啟productionGzip后，需要安裝一個webpack插件進行配合
npm install compression-webpack-plugin -D
5.啟用DllPlugin和DllReferencePlugin預(yù)編譯庫文件
這是最復(fù)雜也是提升效果最明顯的一步，原理是將第三方庫文件單獨編譯打包一次，以后的構(gòu)建都不需要再編譯打包第三方庫，經(jīng)過試驗，打包速度加快十分明顯。但是，如果打包出來的vendor.dll.js文件過大，會影響首頁加載速度，參見https://blog.csdn.net/weixin_33716264/article/details/80228203
第一步：增加build/webpack.dll.config.js文件，并在其中配置需要單獨DLL化的模塊
const path = require("path")
const webpack = require("webpack")
module.exports = {
// 你想要打包的模塊的數(shù)組
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'element-ui','echarts']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 壓縮打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
第二步：在build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 的plugins數(shù)組中增加如下插件
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
第三步：在/package.json增加命令
"dll": "webpack --config ./build/webpack.dll.config.js"
第四步：在/index.html增加DLL化JS引入（必須首先引入）
<script src="/static/js/vendor.dll.js"></script>
第五步：執(zhí)行構(gòu)建
npm run dll（這一步會生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build
