【前端-webpack】webpack性能基础优化

涉及知识点：webpack

解决过程：

第三方框架尽量引CDN

如react与react-dom

// webpack.config.js

module.exports={

...

externals:{

react:'React',

'react-dom':'ReactDOM'

}

}

• 这样webpack在打包的时候会忽略这两个库，大大减少bundle体积
• 这样第三方库被客户端缓存起来，增快加载速度
• 减小bundle体积后，使得开发过程编译时间减少，增加开发效率。

引用第三方库尽量引用库中单独的包

如常用的库loadsh

有时候只用lodash中的一个深拷贝函数_.cloneDeep.

调用方法应该是

import cloneDeep from lodash-cloneeep

而不是

import cloneDeep from lodash/lib/cloneDeep

如果一些工具或组件库没有做分离，则会将整个包打包进来，影响整个bundle大小

查看chunk大小，有针对性的优化

webpack加上--display-modules --sort-modules-by size参数

让chunks从小到大进行排列，可以看出哪些chunk体积较大，进行针对性优化

DllReference

通过DllPlugin来前置第三方包的构建

plugins: [

new webpack.DllPlugin({

path: path.join(__dirname, "js", "[name]-manifest.json"),

name: "[name]_[hash]"

})

]

提取CSS与第三方库

配置如下

const ExtractTextPlugin = require('extract-text-webpack-plugin');

 

module.exports = {

entry: {

main: './index.js',

//公共文件

vendors: ['react', 'react-dom'],

//要提取的css放入一个js中

'ct.style': './src/style.js'

}

}

plugins: [

new webpack.optimize.CommonChunkPlugin({

name: 'vendors',

filename: 'vendors.js',

minChunks: 2

}),

new ExtractTextPlugin({

filename: 'style.css',

allChunks: true

})

]

缓存

babel-loader加cacheDirectory参数进行缓存，减少rebuild时间

modules:{

rules: [

{ use: ['babel-loader?cacheDirectory'] }

]

}

 

问题：webpack中事件发布订阅执行的插件架构Tapable理解

 

解决：

 

Tapable

是webpack中compiler的底层封装，是事件发布订阅执行的插件架构

简单模拟

functionMyClass() {

Tapable.call(this);

}

 

MyClass.prototype=Object.create(Tapable.prototype);

 

constcompiler=newMyClass();

 

compiler.plugin('emit',function() {

 

});//类似于观察者事件中的on

 

• plugin:类似于定语-subscribe
• applyPlugins:类似于发布-publish
• applyPluginsWaterfall:瀑布串行的方式，上次执行结果作为下个函数的实参（只是替换init参数，后面参数不变），返回最终结果
• applyPluginsBailResult:返回值不是undefined便返回中断函数
• applyPluginsAsync

Tapable.prototype.applyPluginsAsyncSeries=Tapable.prototype.applyPluginsAsync=functionapplyPluginsAsyncSeries(name) {

varargs=Array.prototype.slice.call(arguments,1);

varcallback=args.pop();

varplugins=this._plugins[name];

if(!plugins||plugins.length===0)returncallback();

vari=0;

var_this=this;

args.push(copyProperties(callback,functionnext(err) {

if(err)returncallback(err);

i++;

if(i>=plugins.length) {

returncallback();

}

plugins[i].apply(_this, args);

}));

//最后一个参数为next()函数，需要在plugin中定义next才会执行下一个plugin，这就是异步

plugins[0].apply(this, args);

};

 

• applyPluginsAsyncSeriesBailResult:与applyPluginsAsync差不多，next函数有参数便中断执行，返回结果
• applyPluginsAsyncWaterfall(name, init, next):异步串行，value为第二个参数会代替init的值
• applyPluginsParallel:异步并行，remaining为0时说明所有异步执行完毕
• applyPluginsParallelBailResult:参数会依次增加，调用最后一个参数执行回调，回调的参数不为空的时候，会执行callback,且后续不会执行
•