vue-cli项目打包优化(webpack3.0)

1.修改source-map配置：此配置能大大减少打包后文件体积。

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

?

1 2 3 4 5 6 7 8 9 10

// /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 文件即可

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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化的模块

　　　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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 增加如下插件

?

1 2 3 4

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

　c.在 /package.json 增加命令　　

?

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

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

?

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

　e.执行构建

?

1 2	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/