之前写了一篇关于webpack 怎样运用的文章:webpack 单页面运用实战,而且写了一个 单页面运用的小项目 放到了github上。正巧公司前段时间用webpack 做了一个项目,项目不大,是基于单页面运用的。然则上线后才发明了一些题目,本来照样有一些要优化革新的处所。
webpack 单页面运用实战这篇文章基础已满足了我们的需求。比方以下功用我们都已完成:
将css从js中分离出来
运用loader加载css、图片等
运用插件天生html以便自动援用变动版本号的文件
设置大众js
js文件按需加载
设置开辟环境
紧缩js、css、html
给css、js、图片、字体等增添版本号
编译后自动翻开浏览器
热替代
运用代办连系后端效劳开辟
编译时区分开辟环境、临盆环境、热替代环境
config 文件的兼并
清空宣布目次
看似不错,彷佛都已完成了,然则详细到临盆环境时照样有题目的。下面有几处优化(下面照样连系这个项目)。
优化-大众js版本号会变化的题目
这个题目在项目上线之前我没有发明,上线今后,有一次需求变化,我在转变其他js文件的时刻,然后打包宣布发明大众js的版本号发作了转变,末了搜检下来,的确是大众js的内容发作了变化,所以对应的版本号发作了变化。缘由就是webpack默许会把最主要的东西放到大众js里,这里面包括webpack启动运用程序的依靠项、模块与模块的依靠关联、以及文件的版本号等信息。所以一旦恣意的js文件发作转变都邑表现在大众js上。比方我们经由过程webpack构建后天生如许的文件:
再看下common.js 里大抵包括什么内容(截取一小部分):
大众js版本号会变的题目在 github 上议论了一段时间(点击这里),只不过之前没注重。有人用 webpack-md5-hash 插件完成了,然则觉得比较贫苦,终究照样觉得webpack 的贡献者完成的这类体式格局很简朴,而且不需要分外的插件,在新版本的webpack中融会的很好。然则供应的这个demo太简朴,在项目中我们照样要注重一些题目的。比方运用‘热替代’时就会报错。所以我们要做一些转变,我们只需要将之前设置大众js的处所:
// webpack.config.js
...
plugins:[
// 会把 ‘entry’ 定义的 common 对应的两个js 打包为 ‘common.js’
new webpack.optimize.CommonsChunkPlugin("common", 'js/[name].js', Infinity),
]
...
改成:
// webpack.config.js
...
new webpack.optimize.CommonsChunkPlugin(
devServer ?
{name: "common", filename: "js/common.js"}:
{names: ["common", "webpackAssets"]}
),
...
注重: ‘devServer’ 是一个标识变量,代表‘热替代’ ,若有迷惑看上一篇设置变量标识
改成这类设置今后,当时热替代形式的时刻不对common.js做处置惩罚,假如是开辟形式或许宣布形式,会从common.js中将各个文件的版本号以及其他主要信息抽出来,放到‘webpackAssets.js’文件中(称号能够自定义)。天生的文件以下,会多出一个文件,这个文件只需几kb:
改成这类做法后,一旦其他的文件发作转变,都邑在webpackAssets.js文件中获得表现,项目的宣布晋级,只需分外的将这个文件晋级上去即可,而不必将大众js晋级上去。如许的优化会异常有利于处置惩罚缓存的题目。
优化-设置模块目次
假如项目小不设置webpack要求的模块目次没紧要,然则平常项目越来越大,webpack会查找许多无用的文件,这时刻设置模块目次很有必要性,能够进步webpack编译的速率。即设置 resolve.root 属性。另有一个属性是 moduleDirectories,这两个的区分能够点这里。resolve.root 吸收的参数是 node_modules 文件加的绝对路径。我们在之前的webpack.config.js 中增添这个设置项:
// webpack.config.js
...
resolve:{
root: [
path.resolve('./node_modules')
],
...
}
...
如许设置后,webpack编译速率会大大加速,不会每一个文件夹都搜刮一遍。