vue项目webpack打包优化

一，配置resolve.mudules

resolve.mudules原理

resolve.modules告诉 webpack 解析模块时应该搜索的目录。

绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。

通过查看当前目录以及祖先路径（即 ./node_modules, ../node_modules 等等），相对路径将类似于 Node 查找 'node_modules' 的方式进行查找。使用绝对路径，将只在给定目录中搜索。

resolve.modules 默认为:modules: ["node_modules"]

如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：
例如：

modules: [path.resolve(__dirname, "src"), "node_modules"]

（1）当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。
（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，可我们以直接写明 node_modules 的全路径。

工程里添加

resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

二，配置装载机的 include & exclude

原因

（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：
include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
exclude：不能满足的条件（排除不处理的目录）
（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。
（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。

操作

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/
      },
    ]
}

三，使用 webpack-parallel-uglify-plugin 插件来压缩代码

webpack-parallel-uglify-plugin原理

（1）默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢。

（2）我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间。

webpack-parallel-uglify-plugin操作

在项目中安装依赖

npm i webpack-parallel-uglify-plugin

修改prod.conf.js文件


const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

//...

// 注释掉已有的UglifyJsPlugin，用ParallelUglifyPlugin替代
    // new UglifyJsPlugin({
    //   uglifyOptions: {
    //     compress: {
    //       warnings: false
    //     }
    //   },
    //   sourceMap: config.build.productionSourceMap,
    //   parallel: true
    // }),
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        warnings: false
      }
    }),

四，使用externals将固定依赖以外部形式引入

externals原理

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。

externals 配置选项防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

配置方法

从 CDN 引入一些固定的外部依赖,使其不需要打包

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css">

<script src="./static/config.js?v=20180925"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>

在webpack.base.conf.js中配置

externals:{
    'vue':'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'element-ui':"ELEMENT"
  },

以下类似代码可以去掉

import Vue from 'vue';
Vue.use(...)

一些配置解释

例如:

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(/*...*/);

具有外部依赖(external dependency)的 bundle 可以在各种模块上下文(module context)中使用，例如 CommonJS, AMD, 全局变量和 ES2015 模块。外部 library 可能是以下任何一种形式：

root：可以通过一个全局变量访问 library（例如，通过 script 标签）。

commonjs：可以将 library 作为一个 CommonJS 模块访问。

commonjs2：和上面的类似，但导出的是 module.exports.default.

amd：类似于 commonjs，但使用 AMD 模块系统。

可以接受以下语法……

字符串

请查看上面的例子。属性名称是 jquery，表示应该排除 import $ from 'jquery' 中的 jquery 模块。为了替换这个模块，jQuery 的值将被用来检索一个全局的 jQuery 变量。换句话说，当设置为一个字符串时，它将被视为全局的（定义在上面和下面）。

另一方面，如果你想将一个符合 CommonJS 模块化规则的类库外部化，你可以提供外联类库的类型以及类库的名称。

如果你想将 fs-extra 从输出的 bundle 中剔除并在运行时中引入它，你可以如下定义：

module.exports = {
  // ...
  externals: {
    'fs-extra': 'commonjs2 fs-extra',
  }
};

这样的做法会让任何依赖的模块都不变，正如以下所示的代码：

import fs from 'fs-extra';

会将代码编译成：

const fs = require('fs-extra');

数组

module.exports = {
  //...
  externals: {
    subtract: ['./math', 'subtract']
  }
};

subtract: ['./math', 'subtract'] 转换为父子结构，其中 ./math 是父模块，而 bundle 只引用 subtract 变量下的子集。该例子会编译成 require('./math').subtract;

对象

一个形如 { root, amd, commonjs, ... } 的对象仅允许用于 libraryTarget: 'umd' 这样的配置.它不被允许 用于其它的 library targets 配置值.

module.exports = {
  //...
  externals : {
    react: 'react'
  },

  // 或者

  externals : {
    lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // 指向全局变量
    }
  },

  // 或者

  externals : {
    subtract : {
      root: ['math', 'subtract']
    }
  }
};

此语法用于描述外部 library 所有可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。subtract 可以通过全局 math 对象下的属性 subtract 访问（例如 window['math']['subtract']）。

函数

function (context, request, callback)

对于 webpack 外部化，通过定义函数来控制行为，可能会很有帮助。例如，webpack-node-externals 能够排除 node_modules 目录中所有模块，还提供一些选项，比如白名单 package(whitelist package)。

函数接收三个入参：

context (string): 包含引用的文件目录。
request (string): 被请求引入的路径。
callback (function (err, result, type)): 用于指明模块如何被外部化的回调函数
回调函数接收三个入参：

err (Error): 被用于表明在外部外引用的时候是否会产生错误。如果有错误，这将会是唯一被用到的参数。
result (string [string] object): 描述外部化的模块。可以接受形如 {type}{path} 格式的字符串，或者其它标准化外部化模块格式，(string, [string]，或 object)。
type (string): 可选的参数，用于指明模块的类型（如果它没在 result 参数中被指明）。
作为例子，要外部化所有匹配一个正则表达式的引入，你可以像下面那样处理：

webpack.config.js

module.exports = {
  //...
  externals: [
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        // 使用 request 路径，将一个 commonjs 模块外部化
        return callback(null, 'commonjs ' + request);
      }

      // 继续下一步且不外部化引用
      callback();
    }
  ]
};

其它例子使用不同的模块格式：

webpack.config.js

module.exports = {
  externals: [
    function(context, request, callback) {
      // 该外部化的模块，是一个 `commonjs2` 的模块，且放在 `@scope/library` 目录中
      callback(null, '@scope/library', 'commonjs2');
    }
  ]
};

webpack.config.js

module.exports = {
  externals: [
    function(context, request, callback) {
      // 该外部化模块是一个全局变量叫作 `nameOfGlobal`.
      callback(null, 'nameOfGlobal');
    }
  ]
};

webpack.config.js

module.exports = {
  externals: [
    function(context, request, callback) {
      // 该外部化模块是一个在`@scope/library`模块里的命名导出（named export）。
      callback(null, ['@scope/library', 'namedexport'], 'commonjs');
    }
  ]
};

webpack.config.js

module.exports = {
  externals: [
    function(context, request, callback) {
      // 外部化模块是一个 UMD 模块
      callback(null, {
        root: 'componentsGlobal',
        commonjs: '@scope/components',
        commonjs2: '@scope/components',
        amd: 'components'
      });
    }
  ]
};

RegExp

匹配给定正则表达式的每个依赖，都将从输出 bundle 中排除。

webpack.config.js

module.exports = {
  //...
  externals: /^(jquery|\$)$/i
};

这个示例中，所有名为 jQuery 的依赖（忽略大小写），或者 $，都会被外部化。

五，利用 DllPlugin 和 DllReferencePlugin 预编译资源模块

原理

（1）我们的项目依赖中通常会引用大量的 npm 包，而这些包在正常的开发过程中并不会进行修改，但是在每一次构建过程中却需要反复的将其解析，而下面介绍的两个插件就是用来规避此类损耗的：
DllPlugin 插件：作用是预先编译一些模块。
DllReferencePlugin 插件：它的所用则是把这些预先编译好的模块引用起来。
（2）注意：DllPlugin 必须要在 DllReferencePlugin 执行前先执行一次，dll 这个概念应该也是借鉴了 windows 程序开发中的 dll 文件的设计理念。

步骤

（1）在 build 文件夹中新建 webpack.dll.conf.js 文件，内容如下（主要是配置下需要提前编译打包的库）：

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: {
    vendor: ['vue/dist/vue.common.js',
            'vue-router',
            'axios',
            'mint-ui',
            'vue-cordova',
            '@fortawesome/fontawesome-svg-core',
            '@fortawesome/free-solid-svg-icons',
            '@fortawesome/free-regular-svg-icons',
            '@fortawesome/free-brands-svg-icons',
            '@fortawesome/vue-fontawesome']
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

（2）编辑 package.json 文件，添加一条编译命令：

  {
  "name": "ddjk_vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Boss",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:dll": "webpack --config build/webpack.dll.conf.js"
  },

（3）接着执行 npm run build:dll 命令来生成 vendor.dll.js。
注意：如果之后这些需要预编译的库又有变动，则需再次执行 npm run build:dll 命令来重新生成 vendor.dll.js
（4）index.html 这边将 vendor.dll.js 引入进来。

<body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
</body>

（5）打开 build/webpack.base.conf.js 文件，编辑添加如下高亮配置，作用是通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle。

const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  //.....
  plugins: [
     // 添加DllReferencePlugin插件
     new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
     }),
  ]
}

（6）保存后再次构建项目，可以发现时间又缩短了许多。

六，使用happypack来加速代码构建

happypack原理

（1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。
（2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。

happypack解析

happypack操作

安装依赖

npm i happypack

修改webpack.base文件

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

 plugins: [
    new HappyPack({
      //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        // loader: 'babel-loader',
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        exclude: /node_modules/
      },
    ]
  },

参考:

webpack

Vue.js - 提高项目build打包速度（webpack构建性能优化技巧汇总）

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容