缩小文件搜索范围
Webpack从Entry出发递归解析导入语句寻找相应的依赖，在项目庞大的时候，文件量大增，递归解析速度明显的下降。
- 减少被loader匹配到的文件数,通过include缩小搜索范围。
include:path.resolve(_dirname,'src') //只对src目录下的文件进行处理
- reolve.modules
指定第三方模块的目录，默认情况下，webpack会先从./node_modules，如果未找到则在从../node_modules，依次沿上级目录寻找。当第三方模块固定在./node_modules时就不需要递归寻找。
resolve:{
modules:[path.resolve(_dirname,'node_modules')],
}
- resolve.alias
对于某些庞大的第三方库，替换其导入路径，直接使用打包完成最小的min文件，例如React
resolve:{
alias:{
'react':path.resolve(_dirname,'./node_modules/react/dist/react.min.js'),
}
}
使用该方法的缺点是会影响Tree-Shaking，一般对于整体性较强的库来使用。
- resolve.extensions配置
指定默认的匹配的后缀，减少不必要的尝试
resolve:{
extensions:['js','css']
}
- module.noParse配置
让webpack忽略没有采用模块化标准的文件，不用去递归解析这一部分，如JQuery
noParse:[/react\.min\.js%/], //忽略react.min.js
DllPlugin 动态链接库
动态链接库的思想
- 将网页依赖的基础模块抽离，打包到一个个单独的动态链接中。（一个链接可包括多个模块）
- 当导入的模块存在于动态链接库中时，模块不用再次被打包，直接从动态链接库中获取
- 页面依赖的动态链接库都需要被加载
原理
可以把DLL看做一个代码仓库，这个代码仓库里面拷贝了程序所需要的库函数，并且把这些函数存储在一个独立的文件里。项目编译时的时候并不会把其加入编译之后，而是当程序运行时需要调用到里面的函数时，动态的将函数地址传给调用程序
构建速度的对性能提升很大，因为动态链接库只用编译一次，之后的构建都不会再编译动态链接库中的模块了。
使用DllPlugin需要两个webpack的内部插件
-
DllPlugin插件
用于打包出一个个单独的动态链接库文件
-
DllReferencePlugin插件
引入Dllplugin打包好的动态链接库文件
步骤
- 新建一个webpack配置文件用于打包输出Dll文件
module.export = {
entry :{
react:['react','react-dom'],
},
output:{
//输出的动态库的文件名称
filename:'[name].dll.js',
path:path.resolve(_dirname,'dist'),
//存放动态库的全局变量名称
library:'_dll_[name]'
},
plugins:[
new DllPlugin({
//动态库的全局变量名称，name和output.library一致，其实是manifest.json中的name值
name:'_dll_[name]',
path:path.join(_dirname,'dist','[name]_manifest.json'),
}),
]
}
打包过后的会生成两个文件文件
react_manifest.json
{
//文件暴露在全局变量中的名称
"name": "_dll_react",
"content": {
//每个模块
"./node_modules/_react@16.6.3@react/index.js": {
"id": 0,
"buildMeta": {
"providedExports": true
}
},
"./node_modules/_object-assign@4.1.1@object-assign/index.js": {
"id": 1,
"buildMeta": {
"providedExports": true
}
},
.........
}
}
react.dll.js
其中react_manifest.json描述了对应的dll.js文件包含了哪些模块，每个模块的路径，id。当进行编译的时候，main.js入口文件遇到dll.js中的模块时，能够通过dll.js文件暴露的全局变量_dll_react直接获取。
- 使用动态链接库文件
module.exports = {
entry: './src/index.js',
output: {
filename: '[name]_[hash:8].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new DllReferencePlugin({
//告诉webpack使用的动态链接库
manifest:require('./dist/react_manifest.json'),
})
]
}
web-dev-server的优化
自动刷新的原理
- 向网页中注入代理客户端代码，代理客户端和webpack通过Websocket通信控制刷新整个网页
- 将要开发的网页放进iframe中，通过刷新iframe来刷新整个网页
代理客户端刷新
当项目输出多个chunk的时候，devserver并不知道网页依赖于哪个chunk，于是简单的粗暴向所有的chunk都注入代理客户端，导致问题就是当输出的chunk变多的时候，编译速度明显的下降。有两种方式可以优化其构建速度
- 关闭不是很好用的inline模式，
--inline false，这样devser会采用第二种方式刷新网页方式，将网页放入iframe中，通过访问localhost.cn:8080/webpack-dev-server就能够访问到原来的网页。 - 手动向网页注入代理客户端脚本，向index.html插入
<script src="localhost.cn:8080/webpack-dev-server"></script>
模块热替换
模块热替换与自动刷新原理相似，都是在网页中注入一个代理客户端来连接webpack和网页。
原理
模块热替换会对源码进行相应的处理
假设现在有两个js文件，一个main.js,一个appcomponent.js，main.js是appcomponent.js的父组件。当开启hmr的时候，hotmodule会去改变main.js的源码如下
//加入了module.hot，accepet第一个参数是代表要接收哪些子模块的替换，第二个参数是子模块发生变化的回调函数
if(module.hot){
module.hot.accepet(['./AppComponent'],()=>{
render(<AppComponent/>,window.getElementById("app"));
});
})
}
当修改了appcomponent.js的时候，appcomponent的模块更新就会一层一层的往上传，直到某层文件接收当前文件的变化，例如上面的main.js接收appcomponent.js的更新之后，就会调用回调函数，将APPComponent重新替换掉，来实现不刷新使网页变化。但是如果修改的是最外层的main.js就会刷新整个网页。当模块发生变化后，事件一层一层的上传，但是到最后也没有相应的文件来接收变化，就会刷新整个网页。
网友评论