webpack开发环境优化指南

2019 / 03 / 27

这个优化是讲开发环境的,目的就是快,快,快,为了开发体验更舒服,不是用户体验。

babel-loader cacheDirectory

这个是开发环境中提升速度最好的方式。

babel-loader打包还是需要点时间的,随着文件复杂度的增加,这个编译时间还会越来越长,但是如果需要增加cacheDirectory,这样每次编译之后就会产生缓存,所以第一次之后的每次修改的编译速度都会得到大幅度提升。

更新到最新版本

webpack4.x的速度要远大于3.x,而且之后的每次升级就会像intel的挤牙膏一样增加几分配置,所以如果有新版发布,那么最好升级一哈。

nodejs和npm或者yarn也要升级到最新版,webpack的构建依赖这些环境,包括ES6中的一些数据结构Set和Map都在webpack新版中大量使用了,所以更新node可以让webpack的性能更优。

使用include和exclude

在loader中使用exclude或者include排除一些不需要编译的文件

{
test: /\.(jsx|tsx|ts|js)?$/,
use: [
{ loader: 'babel-loader', options: { cacheDirectory: true } },
{ loader: 'eslint-loader', options: { fix: true } }
],
exclude: /node_modules/
},

减少plugin和loader

少用点plugin,每个都会有一定的引导时间,也少用几个loader

eslint-loader其实也可以不用,因为现在的ide都装插件了。报错会提示在文件中。使用的目的是为了可以全局fix,也可以把报错提升在终端和控制台里。

减少resolves中的item数量

我在resolve中写了五个文件,这样加入去寻找json文件的时候就要匹配五次,不能命中的话才会进入下一个,这样会浪费一些效率。

所以开发的时候最好全都用ts和tsx去编写,或者手动加个后缀。

resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
}

webpack中有四种resolve,包括resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles,都应该减少item数量

devtool

webpack提供了十余种devtool,各有好处,但是开发环境下为了快最好用cheap-module-eval-source-map

想深入知道devtool的对照关系图可以看下边的连接。

https://webpack.docschina.org/configuration/devtool/

热更新

react的热更新通过react-hot-loader可以很方便的配置完成,如果不用react的话,webpack也提供了两个用来配置热更新的中间件。

webpack-hot-middleware

webpack-dev-middleware

避免不必要的plugin和优化任务

一些plugin比如压缩混淆在开发环境是没有意义的,所以需要写两份不同的配置文件,防止这些插件作用在开发环境。

另外需要防止不必要的优化,可以在开发环境把这些都关掉。

optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false
},

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟