webpack 功能优化

1.tree shaking通常用于描述JavaScript上下文未引用的代码，新的webpack4更新版本，只需要在package.json中加入sideEffects:false，表明将文件标记为无副作用，然后设置mode: "production"，那npm run build 之后我们的bundle.js已经精简。

2.还有在webpack.prod.js插件中加入

new webpack.DefinePlugin({

'process.env.NODE_ENV': JSON.stringify('production')+

})也会使bundle中文件大小减小

3.使用extract-text-webpack-plugin进行分离css,less文件，让css,less文件从bundle.js分离出来。让js和css文件并行加载可以让css页面先加载减少页面空白时间。使CSS bundle 会跟 JS bundle 并行加载

4.代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间

使用动态代码分离

（1）在output中加入chunkFilename: '[name].bundle.js',然后以在js文件中以import（）形式引入chunk,具体代码见图

备注：中间使用extrac-text-webpack-plugin过程中出现了一个问题就是webpack使用extract-text-webpack-plugin打包时提示错误Use Chunks.groupsIterable and filter by instanceof Entryp

问题分析：extract-text-webpack-plugin还不支持webpack4.4.0以上版本

解决办法

npm install --save-dev extract-text-webpack-plugin@next 

会下载到+ extract-text-webpack-plugin@4.0.0-beta.0 

然后在打包就正常了