webpack项目优化
提取库文件
CommonsChunkPlugin
React、jQuery等库文件很少变化,并且到处被复用,应该被提取出来,并且得到长时间的缓存。
使用插件:webpack.optimize.CommonsChunkPlugin(webpack内建插件)
1 | entry: { |
externals
webpack的externals
配置项规定某些依赖不会被webpack解析,转而从全局变量(引入CDN地址)中去取。
1 | externals: { |
规定解析文件
webpack的resolve
配置项规定解析路径,让被require
或import
的模块更快地被定位到。
1 | resolve:{ |
代码压缩
使用插件:UglifyJsPlugin (webpack3.0之后不再是内建插件,需要额外下载npm i -D uglifyjs-webpack-plugin
)
1 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') |
缓存控制
缓存控制需要做到两点:
- 对于没有修改的文件,从缓存中获取
- 对于已经修改的文件,不从缓存中获取
webpack通过给文件名加上版本号(一串哈希值)来实现缓存。当文件没有更新时,哈希值不会被修改,文件名不变;当文件更新时,哈希值改变,文件名也改变,浏览器就会去加载新的文件。
1 | output: { |
插入引用
由于文件名带上版本号后,每一次文件变化,都需要HTML文件里手动修改引用的文件名,这种工作很琐碎且容错。所以就有了 ExtractTextPlugin 和 HtmlWebpackPlugin
插入css引用
1 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); |
插入js引用
1 | var HtmlWebpackPlugin = require('html-webpack-plugin'); |