关于webpack:你不了解的webpack第二期

打包可视化、打包体积、速度优化及代码优化(webpack3.6.0)

一.打包可视化webpack-bundle-analyzer

1.下载

npm install --save-dev webpack-bundle-analyzer

2.在webpack.prod.conf.js配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin ... plugins:[ new BundleAnalyzerPlugin({           analyzerHost:'localhost', //ip默认是127.0.0.1           analyzerPort:8882, //端口号可自定义           openAnalyzer: false,//默认是true主动关上可视化界面         analyzerMode:'server' | 'static' | 'disabled',//默认是server模式,若不想剖析则设置disabled }),      ]

二.打包速度优化

happypack

先看应用这个之前的打包速度大小

1.下载

npm install --save-dev happypack

2.配置

在webpack.base.conf.js配置

module: {     rules: [           {                test: /.js$/,                 // loader: 'babel-loader',                 loader: 'happypack/loader?id=happy-babel-js', // 减少新的HappyPack构建loader                 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]               },       ] },plugins:[         new HappyPack({               id: 'happy-babel-js',               loaders: ['babel-loader?cacheDirectory=true'],               threadPool: happyThreadPool,        }) ]

用了之后的打包速度
总结:43685ms ->>43252ms

三.dll~打包速度/体积双重优化

配置

1.在index.html

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

2.在package.json

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

3.在build目录新增webpack.dll.config.js

const path = require("path") const webpack = require("webpack") module.exports = {       // 你想要打包的模块的数组       entry: {              vendor: ['vue/dist/vue.esm.js'] //自定义增加拆散打包的插件(看各我的项目配置文件)       },       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({                       comspanss: {                             warnings: false                       }             })       ] }

4.在webpack.dev.conf.js与webpack.prod.conf.js目录增加

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

5.运行

npm run dll

前后比照	All	Vendors	应用dll前
应用dll前	7.55M	5.03M	38401ms
应用dll后	7.2M	4.76M	36126ms

遇到的bug：

1.bug1

解决:

entry: {   vendor: [     "sass-loader" //去掉这个就好了   ] },

2.bug2

解决:

entry: {   vendor: [     "http-proxy-middleware"//去掉这个就好了   ] },

3.bug3~款式失落

解决:

entry: {   vendor: [     "element-ui"//去掉这个就好了   ] },

4.bug4

解决:在应用el-form-item标签时，外层没有加el-form，导致呈现报错

5.bug5

解决:在config/index.js将productionSourceMap设置为false，默认是true

留神:1.vendor外面每新增一个，则须要npm run dll生成对应的文件,而后再npm run build(很重要)

四.打包体积优化externals

先看用这个之前的大小

1.配置

1.在webpack.base.conf.js

externals: {  //须要拆散的第三方插件   'vue': 'Vue',   'element-ui': 'ELEMENT',  //记住,element-ui是基于vue的,拆散element-ui须要加上vue },

2.在index.html

<link href="https://cdn.bootcss.com/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">``<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.14.1/index.js"></script>

3.在main.js

去掉

import ElementUI from 'element-ui' import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI)

新增(可加可不加)

const Vue = require('vue') const ElementUI = require('element-ui') const axios = require('axios')

用了之后的大小

前后比照	All	Vendors	应用dll前
应用externals前	8.86	6.42	42437ms
应用externals后	2.35M	85.18kb	14102ms

总结:externals拆散性能还是挺弱小的,比方拆散第三方库element-ui

1.应用可能遇到的bug1
2.应用可能遇到的bug2

bug痛点:

bug1产生的起因是element-ui在package.json外面的配置没有去掉,我的项目默认加载的是package.json外面的依赖，所以还须要去掉package.json外面的element-ui，而后从新cnpm i，npm run build

bug2产生的起因是页面应用了vue-router-tab,若把vue拆散,则报错bug2

3.bug3

在webpack.base.conf.js配置的

externals: {     //须要拆散的第三方插件         //'vue': 'Vue',         'element-ui': 'ELEMENT', },

bug痛点:独自拆散element-ui会报这个错,因为elemnt-ui 是基于vue书写的,肯定要先引入vue文件,程序不要乱。

总结:拆散第三方库element-ui应用externals刚开始的时候各种报错，起初网上找百度,google就查到对应的答案,“只有功夫深，铁杵磨成针”,路是一步步走进去的,保持就是胜利。

五.代码优化

1.通过配置UglifyJsPlugin去掉console.log

new UglifyJsPlugin({       uglifyOptions: {             comspanss: {                   warnings: false,                   drop_console:false,             }       },       sourceMap: config.build.productionSourceMap,       parallel: true //启用/禁用多过程并行运行 }),

六.打包之后报错

总结:

报错是因为element-ui版本不对，应该升为最高级2.14.1

文中的代码可能不肯定是最优代码，要是你有更好的代码欢送评论。喜爱的能够给我点赞激励哦!
码字不易,屏幕前的大帅比,更多干货文章请关注!!!