vue-cli項目打包優化(webpack3.0)

1.修改source-map配置：此配置能大大減少打包后文件體積。

　　a.首先修改 /config/index.js 文件:　　

　　// /config/index.js
　　dev環境：devtool: 'eval'（最快速度）
　　prod環境：productionSourceMap: false（關閉source-map）

　　b.然后修改 /src/main.js 文件，關閉生產環境的調試信息
　　// /src/main.js
　　const isDebug_mode = process.env.NODE_ENV !== 'production'
　　Vue.config.debug = isDebug_mode
　　Vue.config.devtools = isDebug_mode
　　Vue.config.productionTip = isDebug_mode

　　

2. 啟用happypack多核構建項目

 

　　安裝happypack后，修改 /build/webpack.base.conf.js 文件即可

　　

　　npm install happypack --save-dev
 
　　// /build/webpack.base.conf.js
　　const HappyPack = require('happypack')
　　const os = require('os')
　　const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
　　
　　// 增加HappyPack插件
　　plugins: [
 　　new HappyPack({
  　　id: 'happy-babel-js',
  　　loaders: ['babel-loader?cacheDirectory=true'],
  　　threadPool: happyThreadPool,
 　　})
 　　]
　　// 修改引入loader
　　{
 　　test: /\.js$/,
 　　// loader: 'babel-loader',
 　　loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack構建loader
 　　include: [resolve('src'), resolve('test')]
　　}

　　

 

3.啟用DllPlugin和DllReferencePlugin預編譯庫文件

　　　

　　這是最復雜也是提升效果最明顯的一步，原理是將第三方庫文件單獨編譯打包一次，以后的構建都不需要再編譯打包第三方庫

　　

　　　a.增加 build/webpack.dll.config.js 文件，並在其中配置需要單獨DLL化的模塊

　　　　

const path = require("path")
const webpack = require("webpack")
 
module.exports = {
 // 你想要打包的模塊的數組
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 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
   }
  })
 ]
}

　b. 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./vendor-manifest.json')
})

　c.在 /package.json 增加命令　　

"dll": "webpack --config ./build/webpack.dll.config.js"

　d.在 /index.html 增加DLL化JS引入（必須首先引入）

<script src="/static/js/vendor.dll.js"></script>

　e.執行構建

npm run dll（這一步會生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

　　

　4.通過 externals 配置來提取常用庫，引用外鏈

    具體查看官方文檔：https://webpack.docschina.org/configuration/externals/