压缩代码webpack-webpack打包时体积和速度的一点优化

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1、配置resolve.modules1、优化原理

（1）webpack的resolve.modules用于配置模块库（即node_modules）的位置。 当js中出现import'vue'，不是相对或绝对路径时，它会去node_modules目录下查找。

（2）默认配置下，webpack会使用向下递归搜索的方式来查找。 但一般项目目录下只有一个node_modules，而且是在项目根目录下。 为了缩小搜索范围，我们可以直接写node_modules的全路径。

2、操作步骤

（1）打开build/webpack.base.conf.js文件并添加以下突出显示的配置：

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

2、配置loader的include&exclude1，优化原理

Webpack 的加载器允许每个子加载器具有以下属性：

对于include来说，更精确地指定要处理的目录，这样可以减少必要的遍历，从而减少性能损失。 同样，对于已知的、不需要处理的目录压缩代码webpack，也应该排除掉，从而进一步提高性能。 假设您有对第三方组件的引用，它必须位于node_modules中，通常它会有一个src和一个dist目录。 如果您将 Webpack 配置为排除 node_modules，那么它将从已编译 dist 的目录中获取文件。 否则会重新编译。因此，合理设置include&exclude将大大提高Webpack打包优化的速度

2、操作步骤

（1）打开build/webpack.base.conf.js文件并添加以下突出显示的配置：

module: {
  rules: [
    {
      test: /.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig,
      include: [resolve('src')],
      exclude: /node_modules/(?!(autotrack|dom-utils))|vendor.dll.js/
    },
    {
      test: /.js$/,
      loader: 'babel-loader',
      include: [resolve('src')],
      exclude: /node_modules/
    },

三、使用webpack-parallel-uglify-plugin插件压缩代码1、优化原理

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

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

2、操作步骤

（1）执行以下命令安装webpack-parallel-uglify-plugin

npmiwebpack-并行-uglify-插件

（2）打开build/webpack.prod.conf.js文件并进行以下更改：

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
//....
    // 删掉webpack提供的UglifyJS插件
    //new UglifyJsPlugin({
    //  uglifyOptions: {
    //    compress: {
    //      warnings: false
    //    }
    //  },
    //  sourceMap: config.build.productionSourceMap,
    //  parallel: true
    //}),
    // 增加 webpack-parallel-uglify-plugin来替换
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),

四、使用HappyPack加速代码重构 1、优化原理

要知道，为了方便各种资源和类型的加载，Webpack 被设计成以 loader 加载器的形式来读取资源，而受 Nodejs 编程模型的限制，所有的 loader 似乎都是以异步的方式并发调用的压缩代码webpack，并且仍然运行在单节点进程中，并且在同一个storm周期中，这直接导致了一些问题：同时读取多个loader文件资源时，例如`babel-loader`需要转换各种jsx和es6资源文档。 在这些需要大量cpu计算的同步估计过程中，node的单进程模型没有优势，而Happypack的存在就是为了解决这个问题。

Happypack的处理思路是：将多进程模式从单一进程拓展为loader原来的webpack执行流程，进而加速代码重构； 保持原有流程不变，这样就可以在不改变原有配置的基础上，完成编译流程的优化。

通过在loader中配置loader直接指向happypack提供的loader，对于文件的实际匹配处理loader，在plugin属性中配置来传递描述。 这里，happypack提供的loader和插件之间的连接和匹配是通过 id=happybabel 来完成的。

Happypack在编译过程中，不仅采用了多进程模式来加速编译，同时还启用了缓存估计，可以充分利用缓存来读取和创建文件，这也是非常有意义的提高改进速度； 更多关于happypack的原理，可以看@天猫后端团队（FED）的这篇文章：happypack原理分析。 如果使用Vue.js框架进行开发，也可以参考vue-webpack-happypack的相关配置。

2、操作步骤

（1）执行以下命令安装happypack：

npmi快乐包

（2）打开build/webpack.base.conf.js文件并进行以下更改：

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src')],
        //排除node_modules 目录下的文件
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ]
}

五、使用DllPlugin和DllReferencePlugin预编译资源模块 1、优化原理

（1）我们的项目依赖一般是指大量的npm包，而这样的包在正常的开发过程中是不会改变的，并且在每次创建过程中都需要反复解析，下面介绍这两个插件用于避免这种损失：

(2) 注意：DllPlugin 必须在执行 DllReferencePlugin 之前执行一次。 dll的概念也应该是基于windows程序开发中dll文件的设计理念。

2、操作步骤

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

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vue: ['vue/dist/vue.esm.js', 'vuex', 'vue-router'], //也可以只生成一个dll文件
    vendor: ['lodash', 'axios'],
    common: ['element-ui'],
    antv1: ['@antv/g2'],
    antv2: ['@antv/data-set']
  },
  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文件，添加编译命令：

"dll": "webpack --configbuild/webpack.dll.conf.js"

（3）然后执行npmrundll命令，生成下辈子对应的dll.js。

注意：如果以后需要预编译的库发生变化，需要再次执行npmrunbuild:dll命令重新生成dll.js

(4)从index.html引入dll.js。

    

    
    ··· // 你生成了几个dll都加进来
    

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

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('./vue-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./common-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./antv1-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./antv2-manifest.json')
    })
  ]
}