Webpack:代码分割

栏目: 编程语言 · 发布时间: 5年前

内容简介:在当前的前端项目中,常常使用 gulp、webpack、Browserify 等将多个文件压缩合并成一个。这个过程称为打包。 打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。打包是个非常棒的技术,但随着你的应用增长,你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码,以避免因体积过大而导致加载时间过长。为了避免搞出大体积的代码包,在前期就思考该问题并对代码包进行分割是个不

在当前的前端项目中,常常使用 gulp、webpack、Browserify 等将多个文件压缩合并成一个。这个过程称为打包。 打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。

打包是个非常棒的技术,但随着你的应用增长,你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码,以避免因体积过大而导致加载时间过长。

为了避免搞出大体积的代码包,在前期就思考该问题并对代码包进行分割是个不错的选择。代码分割是由诸如 Webpack(代码分割)和 Browserify(factor-bundle)这类打包器支持的一项技术,能够创建多个包并在运行时动态加载。

对应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容,能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积,但你可以避免加载用户永远不需要的代码,并在初始加载的时候减少所需加载的代码量。

关键点

打包解决了以来文件过多,而导致 http 请求过多的问题

代码分割则是解决打包的副作用——单文件过大,导致加载时间过长。

因此代码分割的关键点在于,如何控制 分割粒度

  • 分割文件多少
  • 文件大小

分割方法

有三种常用的代码分离方法:

entry

entry

每个 entry 都会在最后的打包中输出一个对应的文件。因此可以显示地进行代码分割:

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    // ...
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, './dist')
    }
}
复制代码

进行打包构建后会在 dist 文件夹输出:

app.f7badf83cc90de106d41.js
print.e00bba994e917cc7fc59.js
复制代码

动态导入

动态导入也可以达到代码分割的效果:

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
  element.innerHTML = _.join(['你好呀', 'webpack'], ' ');

  element.onclick = (e) => import(/* webpackChunkName: "print" */ './print').then((Print) => {
  })

  return element;
}

document.body.appendChild(component());

复制代码

webpackChunkName 设置了输出包的名字。

module.exports = {
    entry: {
        app: './src/index.js'
    },
    // ...
    output: {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, './dist')
    }
}
复制代码

outputchunkFilename 决定了非入口(non-entry) chunk 文件的名称。这里的 chunk 是通过代码分割产生的,因此这里通过此选项来设置文件的名字。

运行打包:

app.73efde30ee057cb8c817.js
print.e4408db3b4e5072295de.js
复制代码

插件

CommonsChunkPlugin

在 webpack 4 之前,使用 CommonsChunkPlugin 进行公共 chunk 抽取。

module.exports = {
    entry: './src/index.js',
    entry: {
      main: './src/index.js',
      vendor: [
        'lodash'
      ]
    },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Caching'
    }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
      }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    })
  ],
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};
复制代码

这里有两点值得注意:

  • entry 中的 vendor :显式引用 lodash ,由于 index.js 也导入了 lodash ,因此它就变成了一个公共的模块。
  • 使用 new webpack.optimize.CommonsChunkPlugin 抽取这些公共模块

SplitChunksPlugin

webpack 4 之后 CommonsChunkPlugin 被弃用了,使用 SplitChunksPlugin 代替。 SplitChunksPlugin 是开箱即用的,只需要在 module.exports 中进行配置:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  },
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, './dist')
  }
};
复制代码

上面的配置会将 node_modules 下引用的所有模块都使用 vendor 这个作为 chunk 名以 outputchunkFilename 设置的格式打包到 dist 文件夹中。

SplitChunksPlugin 的选项:

cacheGroups 中每一项都接收如下参数:

  • filename: 重写 chunk 命名方式

    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendor',
      filename:'[name].bundle.js'
      chunks: 'initial',
      minChunks: 2,
    }
    复制代码

    最后会生成名字为 vendor.bundle.js 的文件


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

赢在众筹

赢在众筹

杨东、黄超达、刘思宇 / 中国经济出版社 / 2015-1-1 / 48.00

第一本股权众筹体系化图书。李克强总理要求“开展股票众筹融资试点”。人民大学杨东教授,天使街黄超达、刘思宇两位老总倾情创作。阿里巴巴、平安集团、京东等多家机构联袂推荐一起来看看 《赢在众筹》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具