/ tool

webpack打包慢的解决方案

现在很多人用webpack的HRM热部署更新,以便在开发过程中,修改业务代码时,浏览器能够自动显示更改,不需要刷新浏览器也不需要重启服务,所以DllPlugin和DllReferencePlugin这两个插件用得少了,实际上,dllplugin的方式对webpack的构建打包速度是大大的提高,而且也可以用于生产环境中。想一想:把所有第三方包独立打成library库来应用,不仅可以抽离我们业务代码,同时也命中浏览器缓存,放在cdn上加快速度。我们看一下这种方式是如何使用:
项目工程 = 第三方库 + 业务代码
我们的思想: 将所有第三方库打包成一个 library库,然后去引用它,webpack打包业务代码时候,就不用处理第三方库,从提高构建速度

-----2019-04-25---10.33.35

新建项目webpack-dll,目录结构:
webpack.config.js: 业务代码构建的webpack配置
webpack.dll.js: 第三方库打包成library的配置
dist: 发布目录
src: 业务代码,以及业务代码的入口文件main.js
这次例子中,npm install vue vue-router axios模拟众多的第三方库,接下来我们要:
1.把第三方库打包成一个library
2.修改webpack.config.js的配置,使得不会将第三方库构建到业务代码中


第一步 :打包第三方库


// webpack.dll.js
const webpack = require('webpack')
const path = require('path')
const vendors = [
    'vue',
    'vue-loader',
    'axios'
]

module.exports = {
     output: {
        path:  path.resolve(__dirname,'./dist'),
        filename:'[name].js',
        library: '[name]'
    },
    entry: {
        "lib": vendors
    },
    plugins: [
        new webpack.DllPlugin({
            path: 'manifest.json',
            name: '[name]',
            context: __dirname
        }),
    ]
}

然后我们打包一下:

webpack --config webpack.dll.js,

可以看到生成了 dist 目录下生成一个lib.js,项目根目录下生成了 manifest.json 文件。这个文件是用来对应模块的,比如业务需要require('vue'),通过这个文件,就可以找到lib.js里面的vue模块。
注意:filename指定为[name].js,不加chunkhash值可以命中缓存
DllPlugin是我们用来打包library库的插件,其中:
path:指manifest.json的生成路径
name:要与output的library一致


第二步 :处理业务代码


// webpack.config.js
const webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name]-[chunkhash:7].js'  // 加chunkhash避免缓存
    },
    entry: {
        app: './src/main.js'
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./manifest.json')
        }),
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body' 
        })
    ],
};

注意:再HTMLwebpackplugin的配置里,我将生成app[chunhash].js注入到body里面,而HTML,我引入了我们的lib.js。因为webpack只会根据我们manifest.json做映射而不会将模块打包进来。

<!DOCTYPE html>
<html>
<head>
    <title>webpack-dll</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="lib.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

// main.js入口文件,引入vue
import Vue from 'vue'
new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(
      'span',   // tag name 标签名称
      this.message // 子组件中的阵列
    )
  },
  data: {
    message: 'Hello Vue!'
  }
})

然后我们打包一下,发现不用1秒。

打包结果

这是webpack对于第三方模块的会通过manifest做映射,而不会去引入它,我们看打包后生成的业务bundle:app[chunkhash].js: 前面的代码是webpack manifest代码,后面的就是我们的main.js,然后就没了

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0  这里就是我们的业务代码了*/
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(1);

new __WEBPACK_IMPORTED_MODULE_0_vue__["default"]({
  el: '#app',
  render: function (createElement) {
    return createElement(
      'span',   // tag name 标签名称
      this.message // 子组件中的阵列
    )
  },
  data: {
    message: 'Hello Vue!'
  }
})

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = (__webpack_require__(2))(10);

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = lib;

/***/ })
/******/ ]);

最后总结:
这种方式的构建速度比用commonschunkplugin提取公共代码还要更快,因为webpack不需要分析哪些是第三方模块提取出来再打包处理。实际上,业务代码你也可以配合commonschunkplugin将manifest和业务的基础组件再提取出来,有利于代码模块的分离,提高构建速度。
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着

如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的

本文整理了常见的一些方法,部分使用之后就看到了很大改善,部分没什么明显的变化,也可能是项目规模还不够大,先记录一下方法也好

还是太慢了,快快使用Webpack4

一、使用监听模式或热更新热替换
webpack支持监听模式,此时需要重新编译时就可以进行增量构建,增量构建是很快的,基本不到一秒或几秒之内就能重新编译好

注意区分一下开发环境和线上环境,开发环境启用热更新替换

// 开发环境设置本地服务器,实现热更新
devServer: {
    contentBase: path.resolve(__dirname, 'static'),
    // 提供给外部访问
    host: '0.0.0.0',
    port: 8388,
    // 允许开发服务器访问本地服务器的包JSON文件,防止跨域
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    // 设置热替换
    hot: true,
    // 设置页面引入
    inline: true
},

// 文件输出配置
output: {
    // 设置路径,防止访问本地服务器相关资源时,被开发服务器认为是相对其的路径
    publicPath: 'http://localhost:8188/dist/js/',
},

// 插件配置
plugins: [
    // 热更新替换
    new webpack.HotModuleReplacementPlugin()
]

线上环境的编译,加个 --watch 参数就可以了

二、开发环境不做无意义的操作
很多配置,在开发阶段是不需要去做的,我们可以区分出开发和线上的两套配置,这样在需要上线的时候再全量编译即可

比如说 代码压缩、目录内容清理、计算文件hash、提取CSS文件等

三、选择一个合适的devtool属性值
配置devtool可以支持使用sourceMap,但有些是耗时严重的,这个得多试试

四、代码压缩用ParallelUglifyPlugin代替自带的 UglifyJsPlugin插件
自带的JS压缩插件是单线程执行的,而webpack-parallel-uglify-plugin可以并行的执行,在我的小demo中使用后,速度直接从25s变成了14s

new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
        warnings: false
    }
}),

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

new ParallelUglifyPlugin({
   cacheDir: '.cache/',
   uglifyJS:{
     output: {
       comments: false
     },
     compress: {
       warnings: false
     }
   }
 }),

五、css-loader使用0.15.0以下的版本
听闻这个版本以上的速度会慢许多,不过在我的小demo中还没看到明显变化

六、使用fast-sass-loader代替sass-loader
fast-sass-loader可以并行地处理sass,在提交构建之前会先组织好代码,速度也会快一些

七、babel-loader开启缓存
babel-loader在执行的时候,可能会产生一些运行期间重复的公共文件,造成代码体积大冗余,同时也会减慢编译效率

可以加上cacheDirectory参数或使用 transform-runtime 插件试试

// webpack.config.js
use: [{
    loader: 'babel-loader',
    options: {
    cacheDirectory: true
}]


// .bablerc
{
    "presets": [
        "env",
        "react"
    ],
    "plugins": ["transform-runtime"]
}

八、不需要打包编译的插件库换成全局