webpack学习三： tree shaking、生产环境构建、代码分离

webpack学习三： tree shaking、生产环境构建、代码分离

tree shaking：是一个术语，用于描述移除JavaScript上下文中的未引用代码。

压缩输出：webpack.config.js中设置mode:production就可以把配置切换成压缩输出。压缩输出就是使bundle.js中不包含没有使用的代码。

 

生产环境构建

生产环境（production）对应的配置是：webpack.prod.js,推荐使用source-map选项

开发环境（development）对应的配置是：webpack.dev.js，推荐使用inline-source-map选项

source-map和inline-source-map的区别：

source-map会生成一个SourceMap文件

inline-source-map会生成一个DataUrl形式的SourceMap文件

具体区别查看：https://zhidao.baidu.com/question/1515016680107284660.html

DefinePlugin，给libray指定当前环境（例如：production，development）

 

把script中的配置指向到新的配置

"start": "webpack-dev-server --open"改为:

"start": "webpack-dev-server --open --config webpack.dev.js"

 

"build": "webpack"改为

"build": "webpack --config webpack.prod.js"

 

代码分离：把代码分离到不同的bundle中，然后可以按需加载或并行加载这些文件，代码分离可以获取更小的bundle,以及控制资源加载优先级，如果合理使用，会极大影响加载时间。

 

入口起点：

src下两个js文件，分别是index.js和another-bundle.js文件，分别打包这两个文件

 

如果两个js文件中都引入过一个文件例如lodash,就会在两个bundle中造成重复引用

通过CommonChunkPlugin插件来移除重复的模块，CommonChunkPlugin插件可以将公共的衣领模块提取到已有的入口chunk中，或者提取到一个新生成的thunk。

但是示例中的方式会报错：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead，

用下面的方式来替换即可

动态导入：1、使用import（）语法

 

chunkFilename:决定了非入口的chunk名称。这个文件名的生成是需要在runtime根据chunk发送的请求去生成，因此需要在webpack runtime输出bundle值时，蒋chunk id的值映射到占位符（如【name】和【chunkhash】。这会增加文件的大小，并且在任何chunk的占位符值修改后，都会使bundle失效。

注释（/*webpackChunkName: "lodash"*/）就是告诉webpack打包出来的bundle被命名为lodash.bundle.js,而不是[id].bundle.js

使用async简化函数代码：