webpack 运用优化(一)

之前写了一篇关于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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注