webpack的高级配置

Webpack的高级配置

1.Code Splitting(代码分割)

代码分割和webpack无关

1.webpack中实现代码分割的两种方式

• 同步代码：只须要在webpack.common.js中作optimizatio的配置访问
• 异步代码（import）:异步代码，无需作任何操做，会自动进行代码分割，放置到新的文件中

打开src目录下建立的index.js

安装第三方包：npm install lodash --save

在index.js里引入

import _form "lodash"

console.log(_.join(['a', 'b', 'c'],*********))

第一个参数是字符串链接 第二个参数是链接符

打印结果为abc***********

假如改了咱们的业务逻辑代码，用户须要从新加载main.js，才能获取到最新的代码，执行显示内容，意味代码一变动，用户就要从新加载2MB内容，

解决方案：

手动实现代码分割

1. 在src目录下建立一个lodash.js文件

2. 把index.js里的lodah的引入放到lodash文件里

3. import _form 'lodash'

4. window.=;

5. 把lodash挂载到全局的window上，这样在控制台其余地方能够直接使用下划线变量了

6. index.js里直接写业务逻辑就能够

7. 找到webpack.common.js文件进行配置

   entry:{

   ​ lodash:'./src/lodash.js'

   ​ main:'./src/index.js'

   }

8. 打包会生成两个文件

9. 一个是main.js 一个是lodash.js

10. index.html会同时引入main.js和lodash.js

11. 当页面逻辑发生变化时，只要加载main.js便可，加快页面的加载速度

在webpack4里有一个插件：splitChunksPlugin，而且他直接与webpack作了捆绑，不需安装，直接配制使用

2.代码分割的两种解决方式

1、

配置同步代码，只需在webpack.common.js中作optimization的配置

entry:{

​ main:"./src/index.js"

}

webpack.common.js中

optimization:{

​ splitChunks:{

​ chunks:"all" //帮作代码分割

​ }

}

打包后生成了一个vendors~main.js文件和main.js文件在dist文件下， vendors ~main.js里面有lodash文件内容

2、

在index.js中异步加载lodash文件

function getComponent(){

//打包并不支持下面的这种语法

return import ('lodash').then(({default:_})=>{

​ var element = document.createElement('div')

​ element.innerHTML = _.join(['Dell','Lee'],'-')

​ return element

})

}

getComponent().then((element)=>{

​ docunment.body.appendChild(element)

})

这样会报错

安装：npm install babel-plugin-dunamic-import-webpack --save-dev

3.SplitChunksPlugin配置参数详解

optimization:{

​ splitChunks:{

​ chunks:"async", //在咱们作代码分割时，只对异步代码有效，配置"all"会对同步异步一块儿作分割，"inital"：对同步代码作分割

​ minSize:30000,///大于30000才进行代码分割，小于就不进行代码分割

​ maxSize:0,//能够配也能够不配

​ minChunks:1, //当一个模块被用了多少次，才进行代码分割

​ maxAsyncRequest：5，//同时加载的模块最多5个

​ maxInitialRequest:3, //入口文件引入的库，若是作代码分割，只能3个

​ automaticNameDelimiter:'~' //文件生成的时候，文件中间有~链接

​ name:true //打包生成的文件起什么名，cacheGroups里的名字让它有效

​ cacheGroups:{//当打包同步代码时，上面的参数有效

​ vendors:{//若是引入的文件大于30KB，

​ test:/[\/]node_modules[\/]/,//若是从node_modules引入的模块把它打包到wendors.js里

​ priority:-10, //-10优先级大，文件会被打包到wendors.js里

​ filename:"vendors.js"

​ }，

​ default:{

​ priority:-20,

​ reuseExistingChunk:true,//若是一个模块已经被打包过了，那再打包会忽略这个模块，直接使用以前被打包的

​ filename:'common.js'//打包以后生成的文件名

​ }

​ }

​ }

}