Webpack 代码分离

Webpack 代码分离

? 提示:

1、版本问题

本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改变。所以,如果你的项目中已使用了 webpack 1.x ,本教程的示例将不适用,请慎重。 如果铁了心要升级 webpack ,请参考 webpack 官方文档 - 从 v1 迁移到 v2

2、阅读建议

阅读本文前,建议先阅读 Webpack 概念

代码分离是 webpack 中最引人注目的特性之一。

你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件。

总的来说, webpack 分离可以分为两类:

  • 资源分离
  • 代码分离

资源分离(Resource Splitting)

对第三方库(vendor) 和 CSS 进行代码分离,这些方式有助于实现缓存和并行加载。

分离 CSS(CSS Splitting)

你可能也想将你的样式代码分离到单独的 bundle 中,以此使其独立于应用程序逻辑。这加强了样式的可缓存性,并且使得浏览器能够并行加载应用程序代码中的样式文件,避免 FOUC 问题 (无样式内容造成的闪烁)。

安装 ExtractTextWebpackPlugin 如下

$ npm install --save-dev extract-text-webpack-plugin

webpack.config.js 中需要按下面进行配置:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

  // 关于模块配置
  module: {

    // 模块规则(配置 loader、解析器等选项)
    rules: [
      {
        // css 加载
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      }
    ]
  },

  // 附加插件列表
  plugins: [
    // 将样式文件独立打包
    new ExtractTextPlugin("styles.css")
  ]
};

​? 示例DEMO09: (DEMO / SOURCE)

分离第三方库(Vendor Code Splitting)

一个典型的应用程序,由于框架/功能性需求,会依赖于许多第三方库的代码。不同于应用程序代码,这些第三方库代码不会频繁修改。

如果我们将这些库(library)中的代码,保留在与应用程序代码相独立的 bundle 中,我们就可以利用浏览器缓存机制,把这些文件长时间地缓存在用户机器上。

为了完成这个目标,不管应用程序代码如何变化,vendor 文件名中的 hash 部分必须保持不变。学习如何使用 CommonsChunkPlugin 分离 vendor/library 代码。

webpack.config.js

const webpack = require('webpack');

module.exports = {
  // 这里应用程序开始执行
  // webpack 开始打包
  // 本例中 entry 为多入口
  entry: {
    main: "./app/index",
    vendor: "react"
  },
  
  // webpack 如何输出结果的相关选项
  output: {
    // 所有输出文件的目标路径
    // 必须是绝对路径(使用 Node.js 的 path 模块)
    path: path.resolve(__dirname, "dist"),

    // 「入口分块(entry chunk)」的文件名模板(出口分块?)
    // filename: "bundle.min.js",
    // filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
    // filename: "[chunkhash].js", // 用于长效缓存
    filename: "[name].[chunkhash:8].js", // 用于长效缓存
  },

  // 附加插件列表
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor" // 指定公共 bundle 的名字。
    })
  ]
};

在上面的配置中,

  1. entry 属性中,将 react 指定为一个独立的入口 vendor
  2. 然后,在 output 属性中,将 filename 指定为 [name].[chunkhash:8].js,这表示输出文件的文件名样式。
  3. 最后在 plugins 列表中引入 CommonsChunkPlugin 插件,用来指定 bundle 。

执行 webpack 命令后,webpack 会生成 2 个 bundle 文件,形式如:

main.bef8f974.js
vendor.2f1bd4c8.js

​? 示例DEMO10: (DEMO / SOURCE)

代码按需分离(On Demand Code Splitting)

虽然前面几类资源分离,需要用户预先在配置中指定分离模块,但也可以在应用程序代码中创建动态分离模块。

这可以用于更细粒度的代码块,例如,根据我们的应用程序路由,或根据用户行为预测。这可以使用户按照实际需要加载非必要资源。

前一节,我们了解了 webpack 可以将资源拆分为bundle。接下来,我们要学习如何异步加载。例如,这允许首先提供最低限度的引导 bundle,并在稍后再异步地加载其他功能。

webpack 支持两种相似的技术实现此目的:使用 import() (推荐,ECMAScript 提案) 和 require.ensure() (遗留,webpack 特定)。本文只介绍官方推荐的 import() 方式。

ES2015 loader 规范定义了 import() 作为一种在运行时(runtime)动态载入 ES2015 模块的方法。

webpack 把 import() 作为一个分离点(split-point),并把引入的模块作为一个单独的 chunk。 import() 将模块名字作为参数并返回一个 Promoise 对象,即 import(name) -> Promise

配合 Babel 使用

如果你想要在 Babel 中使用 import,但是由于 import() 还是属于 Stage 3 的特性,所以你需要安装/添加 syntax-dynamic-import 插件来避免 parser 报错。在草案正式成为规范后,就不再需要这个插件了。

例:

我们来定义一个 Clock 组件,动态引入 moment 库。

首先,安装 moment 库。

$ npm install --save-dev moment

JavaScript 代码:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date().toLocaleDateString() };
    this.click = this.click.bind(this);
  }

  click() {
    // 动态引入import()
    import('moment')
      .then(moment => moment().format("MMMM Do YYYY, h:mm:ss a"))
      .then(str => this.setState({date:str}))
      .catch(err => console.log("Failed to load moment", err));
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date}.</h2>
        <p onClick={this.click}>Click here to changing the time.</p>
      </div>
    );
  }
}

webpack.config.js

// 关于模块配置
module: {

  // 模块规则(配置 loader、解析器等选项)
  rules: [
    {
      // 语义解释器,将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),

      // 应该应用的 loader,它相对上下文解析
      // 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的
      // 查看 webpack 1 升级指南。
      loader: "babel-loader",

      // loader 的可选项
      options: {
        presets: ["es2015", "react"],
        plugins: ['syntax-dynamic-import']
      },
    },
  ]
},

​? 示例DEMO11: (DEMO / SOURCE)

Webpack 系列教程

欢迎阅读其它内容:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lhyt前端之路

pwa+webpack,初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa

我们都知道pwa是一个新技术.,依靠缓存,离线了还能正常跑,而且秒开。我把以前原生写的小游戏迁移到react,再迁移到webpack+react,最后再升级到p...

722
来自专栏java架构师

解决ASP.NET中的各种乱码问题

经常发现有人被乱码困扰着,而我感觉比较幸运,很少为此烦恼过。 在这篇博客中,我将把我想到的一些与乱码有关的经验总结出来,供大家参考。 页面显示乱码问题 在一...

2986
来自专栏ChaMd5安全团队

巅峰极客 第二场 WriteUp

1 返回地址覆盖为printf(func_got)/write(1,func_got,4)来leak libc,并将printf/write返回地址设为game...

822
来自专栏依乐祝

ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了

将 Swagger 生成器添加到 Startup.ConfigureServices 方法中的服务集合中:

681
来自专栏运维咖啡吧

LDAP落地实战(一):OpenLDAP部署及管理维护

上边来了一堆的名词解释,看的云里雾里,还不是很明白,怎么跟自己的组织架构对应起来呢?看看下边的图是不是清晰明了

933
来自专栏IMWeb前端团队

PhantomJS基础及示例

概述 PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast...

2078
来自专栏Hadoop实操

如何在CDH中使用HBase的ACLs进行授权

1994
来自专栏cloudskyme

Ubuntu--tar命令

tar zxvf ut6410-android2.1.tgz tar zcvf ut6410-android2.1.tgz ut6410-android2.1/...

3145
来自专栏phodal

Chrome 调试第三方 UI 库技巧

722
来自专栏生信宝典

生信人写程序2. Editplus添加Perl, Shell, R, markdown模板和语法高亮

前言 “工欲善其事必先利其器”,生信工程师每天写代码、搭流程,而且要使用至少三门编程语言,没有个好集成开发环境(IDE,Integrated Developme...

2508

扫码关注云+社区