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 = v.NODE_ENV !== 'production'
  fig.debug = isDebug_mode
  fig.devtools = isDebug_mode
  fig.productionTip = isDebug_mode
2.启⽤happypack多核构建项⽬
  安装happypack后，修改 /build/f.js ⽂件即可
  npm install happypack --save-dev
  // /build/f.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/fig.js ⽂件，并在其中配置需要单独DLL化的模块
const path = require("path")
const webpack = require("webpack")
// 你想要打包的模块的数组
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/f.js 和 build/f.js 增加如下插件new webpack.DllReferencePlugin({webpack打包流程 面试
context: __dirname,
manifest: require('./vendor-manifest.json')
})
　c.在 /package.json 增加命令 
"dll": "webpack --config ./build/fig.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配置来提取常⽤库，引⽤外链
具体查看官⽅⽂档：/configuration/externals/

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