webpack 性能提速

JouyPub 发布于2019-08-29 17:29 / 1142人阅读

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。

按需引用外部的组件按需引用

2.启用happypack多核构建项目

3.修改source-map配置

启用DllPlugin和DllReferencePlugin预编译库文件

1、按需引用
1.1几乎所有的第三方组件框架都会提供组件的按需引用方式，以iview为例，通过借助插件babel-plugin-import可以实现按需加载组件，减少文件体积，只需要修改.babelrc文件

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

1.2然后这样按需引入组件，就可以减小体积了
import { Button } from "iview"
Vue.component("Table", Table)

2、启用happypack多核构建项目
安装happypack后，修改/build/webpack.base.conf.js文件即可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require("happypack")
const os = require("os")
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
    new HappyPack({
      id: "happy-babel-js",
      loaders: ["babel-loader?cacheDirectory=true"],
      threadPool: happyThreadPool,
    })
  ]
// 修改引入loader
{
    test: /.js$/,
    // loader: "babel-loader",
    loader: "happypack/loader?id=happy-babel-js", // 增加新的HappyPack构建loader
    include: [resolve("src"), resolve("test")]
}

实现js缓存

webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分，具体的用法就不做过多介绍，不太了解可以参考webpack官网介绍；

该插件是webpack项目常用的一个优化功能，几乎在每个webpack项目中都会用到。使用该插件带来的好处：

提升webpack打包速度和项目体积：将webpack入口的chunk文件中所有公共的代码提取出来，减少代码体积；同时提升webpack打包速度。

利用缓存机制：依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。

但是在项目中，若插件打开方式不正确的话，上面的第二点其实是无法实现，因为这种情况下：

没有被修改过的公有代码或库代码打包出的Entry Chunk，会随着其他业务代码的变化而变化，导致页面上的长缓存机制失效。

那么，下面就来开启CommonsChunkPlugin正确的打开方式。

GPU云服务器云服务器网络提速专线提速网页提速提速

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114359.html

webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

Reducto 2019-08-23 13:54 评论0 收藏0
webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

BWrong 2019-08-02 12:10 评论0 收藏0
webpack4 配置解析和实战

摘要：特性比较热门的两大特性，零配置和速度快号称提速上限一般情况下，相比于低版本，场景下第三方依赖打包速度和场景下本地服务首次启动速度都得到显著提升零配置通过指定当前场景为开发模式还是生产模式，自动设置好当前场景的默认配置，用户即可马上使用，不需 webpack4特性 webpack4比较热门的两大特性，零配置和速度快（号称提速上限98%）一般情况下，webpack4相比于低版本，prod...

王笑朝 2019-08-26 12:09 评论0 收藏0
开发工具心得：如何 10 倍提高你的 Webpack 构建效率

摘要：在项目架构中这两个东西基本成为了标配，但的模块必须在使用前经过的构建后文称为才能在浏览器端使用，而每次修改也都需要重新构建后文称为才能生效，如何提高的构建效率成为了提高开发效率的关键之一。 0. 前言 showImg(https://segmentfault.com/img/remote/1460000005770045); 图1：ES6 + Webpack + React + Bab...

用户83 2019-08-19 18:35 评论0 收藏0