webpack 运用优化（一）

2019年8月31日 231次阅读 来源: huangsw

之前写了一篇关于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构建后天生如许的文件：

《webpack 运用优化（一）》

再看下common.js 里大抵包括什么内容（截取一小部分）：

《webpack 运用优化（一）》

大众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：

《webpack 运用优化（一）》

改成这类做法后，一旦其他的文件发作转变，都邑在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编译速率会大大加速，不会每一个文件夹都搜刮一遍。

    原文作者：huangsw
    原文地址: https://segmentfault.com/a/1190000006695443
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞