webpack性能优化总结

本文隶属于分类

Web开发

推荐文章

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:单独   set   基础   common   input   echart   clu   并且   from   

一.缩小文件的搜索范围

  1. 优化Loader配置
    使用配置项include与exclude尽可能高概率命中文件,减少webpack匹配文件的时间。
    我们可以适当的配置项目的结构目录。
    module.exports = {
    module: {
        rules: [{
            test: /\.js?$/,
            include: path.resolve(__dirname, ‘app‘),
            use: {
              loader: ‘babel-loader?cacheDirectory‘,
              options: {
                presets: [‘es2015‘, ‘react‘, "stage-0"]
              }
            }
          }],
    },
    }

    webpack性能优化总结 - 爱上编程技术图片

  2. 优化resolve.modules
    指定模块路径,不需要按照默认的方式一层一层查找文件夹, 指定modules配置下的app目录方便在引入其他组件可以以绝对路径引入。引入方式如下截图:
    module.exports = {
    resolve: {
    extensions: [‘.js‘, ‘.jsx‘],
    modules: [
    path.resolve(dirname, ‘app‘),
    path.resolve(
    dirname, ‘node_modules‘)
    ]
    }
    }

    ReactEcharts是npm安装的模块,Input是自己写在公共组件components的文件夹,由于components在app文件夹下
    根据配置,可以直接以此种方式引入。
  3. 优化resolve.extensions
    此配置项默认配置为:
    extensions: [‘js‘, ‘json‘]
    如果这个数组列表越长, 或者正确的后缀越往后, 就会造成尝试的次数越多,所以resolve.extensions尽量减少后缀尝试的可能性。建立配置为:
    extensions: [‘js‘],

二. 使用DLLPLUGIN
为什么web项目构建介入动态连接库的思想后,会大大提升构建速度呢?原因在于,包含大量复用模块的动态链接库只需被编译一次,在之后的构建过程中被动态链接库包含的模块将不会被重新编译,而是直接使用动态连接库中的代码。要给web项目构建接入动态链接库的思想,需要完成以下事情。

  • 将网页依赖的基础模块抽离出来,打包成一个个单独的动态链接库中。在一个动态链接库中可以包含多个模块。
  • 当需要导入的模块存在于某个动态链接库,这个模块不能再次打包,而是去动态链接库中去获取。
  • 页面依赖的所有动态链接库都需要被加载。
    下面以react项目为例。
    webpack已经内置了对动态链接库的插件Dllplugin以及DllReferencePlugin
    首先看构建成功之后的目录结构
    webpack性能优化总结 - 爱上编程技术图片
    以及构建webpack的配置,下图是webpack_dll.config.js文件:

    下图是webpack配置主文件的重要配置:

    编译主webpack文件,自动加入dll.js以及main.js
    下图是页面引入dll依赖以及引入主js:
    webpack性能优化总结 - 爱上编程技术图片
    接下来讲解如何实现。
    webpack_dll.config.js负责构建dll.js,在项目中把react的基本依赖库打包成react.dll.js,
    把常用的polyfill打包成polyfill.dll.js。这两个需要在index.html引入。在webpack主配置中利用DllReferencePlugin插件根据对应名字的json文件,json文件会根据id与路径,引入打包好的dll文件。并且在main.js中不会出现dll重复打包的模块(react等配置进去的模块不会再次打包如main.js),减少主要js的体积,提高构建速度。
    执行构建时,首先要编译webpack_Dll.config.js,构建出配置的dll,然后再编译webpack的主配置,编译出main.js,然后引入dll系列js,最后引入main.js。
    由于动态链接库大多数包含的是常用的第三方库,一般都不会随意升级,在package.json的依赖上删除^标示。当涉及dll的库升级,或者添加第三方库,就需要重新编译了。

三. 使用HappyPack
HappyPack 是通过把loader交给程序多进程去并发处理,由于js是单线程,只能通过多进程去发挥cpu的功能。配置也相对简单。


四. 使用Tree Shaking
TreeShaking可以用来提出JavaScript中用不上的死代码.它依赖静态的ES6模块化语法。Webpack2.0版本经已内置。从一简单例子解释Tree Shaking的作用。假如有一个文件util.js里存有两函数。在main.js引入和使用util.js
util.js源码如下
export function funcA(){<br/>}<br/>export function funcB() {<br/>}<br/>
main.js源码如下
import { funcA } from ‘./util.js‘ funcA()
经过TreeShaking后 util中funcB函数没有被引入使用就会被TreeShaking当作死代码剔除。
接下来讲解如何配置Webpack让Tree Shaking,以react项目为例子。
首先修改babel的规则
presets: [["env, { modules: false }"], ‘react‘, ‘statge-0‘]
其中modules: false的含义是关闭Babel的模块转换功能,保留原本的ES6模块化语句。
修改第三方库的引入文件规则
以redux为例子,其发布到Npm上的目录结构为:
|-- es
---- index.js
|-- lib
---- index.js
package.json
在package.json有两个字段
"main": "lib/index.js", // 采用commonJs模块化入口
"jsnext:main": "es/index.js", // 采用es6模块化入口
以下配置的含义优先使用jsnext:main作为入口,即采用es6模块化入口代码。
modules.exports = {
resolve: {
mainFields: [‘jsnext:main‘, ‘browser‘, ‘main‘],
},
}
然后配合UglifyJS插件处理一遍代码,即可剔除死代码,提高构建速度。
webpack性能优化总结 - 爱上编程技术图片
如出现当前问题只需npm install babel-preset-env -D安装babel-preset-env依赖即可。
五.使用ParalleUglifyPlugin
ParalleUglifyPlugin采用多进程压缩代码,每个进程还是通过UglifyPlugin去压缩代码。

更多参数配置详见https://www.npmjs.com/package/webpack-parallel-uglify-plugin

webpack性能优化总结

标签:单独   set   基础   common   input   echart   clu   并且   from   

原文:http://blog.51cto.com/13592056/2067790

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区