webpack优化

在我们构建单页面运用(vue, React)或封装插件时,很大时机用到webpack,这个JavaScript的打包东西.
但项目代码日趋增多时,webpack一些简朴的设置会暴露各种弊病(打包时候长,代码大).
以下是连系本身开辟和进修webpack历程处理题目的总结.

打包时候长

DllPlugin

很多人都晓得webpack.optimize.CommonsChunkPlugin这个插件是用来提取大众库的,但这个插件也处理不了大众库反复打包的题目.
但是,DllPlugin这个插件就能够处理.
这个插件会先把大众库打包.
它自己具有自力的webpack设置文件,设置文件入口处是须要打包的大众库.
当它打包完后,会天生大众的js包和manifest.json.
manifest.json是用来让主设置文件DLLReferencePlugin映照到相干的依靠上去的

devtool cheap-module-eval-source-map

当我们运用webpack打包后的代码都经由编译的,所以变得难以调试.
所以webpack给了devtool的api,会经由过程Source Map找出失足的准确位置.
挑选devtool的cheap-module-eval-source-map原因是,每一个模块运用eval()大幅进步延续构建效力和没有天生列映照节约构建时候(浏览器引擎会自动给出列信息).

机能优化

款式的星散与紧缩

运用extract-text-webpack-plugin将各个剧本里的款式提取到出来.
假如设置allChunks: true会使提取出来的款式合并到一个文件.
运用optimize-css-assets-webpack-plugin将款式举行紧缩.

剧本的紧缩

运用uglifyjs-webpack-plugin将剧本举行紧缩.

js机能优化

webpack每一个模块都邑放入一个闭包函数中.
运用webpack.optimize.ModuleConcatenationPlugin会将相干联的模块放入一个闭包里.
从而削减闭包的数目.

提取大众代码

运用DllPlugin或webpack.optimize.CommonsChunkPlugin会将大众的代码提取出来打包到其他文件.
防止反复打包,从而削减包的大小.

效劳器预紧缩

当效劳开启预紧缩时.
会优先猎取以文件名称加.gz末端的文件,这份文件是紧缩事后的文件,体积会小.
运用CompressionWebpackPlugin会天生对应紧缩文件.