关于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

遇到的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')

用了之后的大小

总结: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

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

备注:
★局部素材来自网络，版权归原创者，如有侵权请分割删除