前端webpack构建优化

从0到1负责手上项目一年多了，webpack虽然是老生常谈的话题，但只有出现问题时，才会去思考怎么去优化。因为项目里引入了愈来愈多的依赖，因此本地开发编译过程愈来愈慢，所以才有了这一次的webpack优化。顺便对一些生产环境的静态资源也作了一些优化。

一.HappyPack多线程编译

Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz 8核16线程

webpack 3.12.0 ThreadPool.size:16

本地构建速度：

51281ms（未引入happypack）

43750ms（引入happypack eslint-loader）

35862ms（引入happypack eslint-loader, vue-loader）

35476ms（引入happypack eslint-loader, vue-loader, babel-loader）

打包dist速度：

58192ms（未引入happypack）

49745ms（引入happypack eslint-loader）

46505ms（引入happypack eslint-loader, vue-loader）

43358ms（引入happypack eslint-loader, vue-loader, babel-loader）

从上面的实验数据能够得出：不管是本地构建仍是打包dist，eslint-loader，vue-loader，babel-loader的happypack对编辑速度都是有提高的。

二.TinyPng优化静态图片资源

tinypng.com/

三.优化loader配置

cacheDirectory开启缓存，include去除无需处理文件。

// 配置前

{

    test: /\.js$/,

    loader: ‘babel-loader',

    include: [resolve('src'), resolve(’test'), resolve('node_modules/webpack-dev-server/client')],

},
复制代码

// 配置后

{

    test: /\.js$/,

    loader: ‘babel-loader?cacheDirectory=true’,// 开启缓存加速

    include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')], // 并没有单测，去除test目录

},
复制代码

四.优化包查找路径

使用绝对路径，只在给定目录中搜索，省去了查找依赖的时间损耗

由于默认设置是[node modules]。 从当前目录找node_modules，若没有，从../node_modules找，如果再没有，继续找../node_modules，直到找到为止。

我手上的项目是直接存在src,build目录同级的node_modules下的，因此能够按照下面这样修改。

// 配置前

resolve: {

    modules: ["node_modules”],

}
复制代码

// 配置后

resolve: {

    modules: [path.join(__dirname, '..', "node_modules”)] // 这个路径根据构建文件所在位置去调整，此处是build/webpack.base.conf.js，node_modules目录与src目录同级

}
复制代码

五.消除无更新的图片资源计算

因为项目中的一些图片资源是一直不变的，所以没有必要每次都经过url-loader或file-loader加载打包，消除转换base64url或者:hash:，因此图片资源尽量使用绝对路径引入/static下的文件，而不是经过import去引入。

出于优化成本考虑，我此次仅仅将超过limit的图片进行转移。

转移前：vue.40add6f.png

转移后：vue.png

例如预发环境，如果不一样环境的BASE_URL不同，能够经过DefinePlugin和<=%BASE_URL%=>传入。

config.js

{

    dev:{

        BASE_URL:’/’,

    },

    build:{

        BASE_URL:’/foo/bar/’,

    }

}
复制代码

webpack.dev.conf.js

plugins:{

    new webpack.DefinePlugin({

        BASE_URL:JSON.stringify(config.dev.BASE_URL),

    }),

},
复制代码

webpack.prod.conf.js

plugins:{

    new webpack.DefinePlugin({

        BASE_URL:JSON.stringify(config.build.BASE_URL),

    }),

},
复制代码

<link rel="icon" href=“<%=BASE_URL%>static/favicon.ico">

favicon.ico的路径地址以下：

在开发环境是：localhost:9090/static/favicon.ico

在生产环境是：www.jsnb.com/foo/bar/sta…

在单文件组件内该如何操做呢？

很简单，只要与src同级建立一个baseUrl.js，而后在文件中绑定到组件data函数上便可。

// eslint-disable-next-line no-undef

export default BASE_URL;

<img :src=“Logo" /> const Logo = `${baseUrl}static/logo.png`; data(){     return {         Logo,     } } 复制代码

优势：

1.迁移assets下大文件到static，减小计算hash时间，经过/static引入。

2.DefinePlugin，根据环境切换static引入路径统一引入。（若经过webpack的resolve.alias统一引入，仍是会被url-loader加载，仍是会去作计算）。

缺点：

1.构建提高速度收效甚微

2.有缓存文件不能用此方法，会有缓存

3.图片文件存放分散，不便于管理

建议：在没有遇到因为url-loader，file-loader加载图片，视频等本地资源慢的状况下，能够一直使用assets的方式，不用折腾。

六.提高开发环境rebuild速度

source map众所周知是为了webpack debug的一个配置，有7个配置。能够参考官方文档webpack.js.org/configurati…和我以前作的一个小实验github.com/FrankKai/Fr…作对比。

开发环境：

devtool:’source-map’->devtool: ‘eval-source-map’

rebuild速度从--slow提高到了+pretty fast。

提速缘由是：SourceMap转换为DataUrl加载到eval()中。从新构建时速度更快，

官方文档介绍以下：

eval-source-map - Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.

斯世浊清，全赖吾辈激扬！