关于webpack代码拆分的解析


Posted in Javascript onJuly 20, 2017

最近在学习VUE的时候接触到了webpack,今天就留个小笔记,介绍一下webpack代码拆分

如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来。比如:

  1. 样式表,希望利用 link 标签引入
  2. 使用概率较低的模块,希望后期需要的时候异步加载
  3. 框架代码,希望能利用浏览器缓存下部分不易变动的代码

下面是我在阅读 webpack 的官方文档时候,记录的一些笔记,部分地方使用了自己的话来讲,力图让它显得更易懂。

按需加载拆分

webpack 可以帮助我们将代码分成不同的逻辑块,在需要的时候加载这些代码。

使用 require.ensure() 来拆分代码

require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块,其使用方法如下:

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

第一个参数指定依赖的模块,第二个参数是一个函数,在这个函数里面你可以使用 require 来加载其他的模块,webpack 会收集 ensure 中的依赖,将其打包在一个单独的文件中,在后续用到的时候使用 jsonp 异步地加载进去。

require.ensure(['./a'], function(require){
  let b = require('./b');
  let a = require('./a');
  console.log(a+b)
});

以上代码,a 和 b 会被打包在一起,在代码中执行到这段代码的时候,会异步地去加载,加载完成后执行函数里面的逻辑。

let a = require('./a');
require.ensure(['./a'], function(require){
  let b = require('./b');
  console.log(a+b)
});

如果这样写,那么 a 不会和 b 打包在一起,因为 a 已经被打包在主代码中了。

require.ensure(['./c'], function(require){
  let a = require('./a');
  console.log(a)
});

require.ensure(['./c'], function(require){
  let b = require('./b');
  console.log(b)
});

以上代码中两个模块都依赖了 c 模块,这个时候会拆分出两个模块,其中都包含了 c 模块,因为在实际运用中,以上两个 require.ensure 的执行顺序不确定,执行与否也不确定,因此需要将 c 模块都打包进去。

require.ensure 还可以传入第三个参数,这个参数用来指定打包的包名,对于上面这种情况,c 模块被打包入了两个包中,如果事先明确这两个包都会被使用,那么不妨将这两个包合并为一个,这样就不会有 c 模块被打包两次的问题了,所以可以将 chunkName 指定为同一个名字。

require.ensure(['./c'], function(require){
  let a = require('./a');
  console.log(a)
}, 'd');

require.ensure(['./c'], function(require){
  let b = require('./b');
  console.log(b)
}, 'd');

ok,这样以上两个 require.ensure 拆出来的包就合并为同一个了。

CSS 拆分

开发者,可能希望能将工程中的所有引入的 CSS 拆分为单个文件,这样可以利用缓存,且利用 CSS 和 JavaScript 并行加载,来加速 web 应用。

使用 css-loader

为了加载 css,这里需要用到 css-loader,配置方法如下:

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'css-loader'
  }]
}

这样在代码中就可以写如下代码:

let css = require('./main.css');
console.log('' + css);

通过 require 一个 css 得到其内容,当然了这里 require('./main.css') 实际得到的是一个对象,需要调用其 toString 方法将其转换为字符串。在代码中引用一段 css,这常常不是我们想要的。为此可以使用 style-loader 在代码执行起来的时候,会将这些 css 插入到 style 标签中,只是这里 css 还是存在于 js 中的,是后来动态插入到页面中的:

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
  }]
}

更多时候,是希望将 css 拆分为单个文件,然后使用 link 标签嵌入到 html 中,CSS 和 JavaScript 可以并行加载,css 还可以被缓存下来。

使用 extract-text-webpack-plugin 来拆分 css

为了使用这个插件首先需要通过 npm 来安装它:

npm i --save-dev extract-text-webpack-plugin

然后在 webpack 的配置文件中使用该插件:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = function () {
  return {
    entry: './index.js',
    output: {
      path: './build',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.css$/,
        exclude: /node_modules/,
        // 在 loader 中使用该插件
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }]
    },
    plugins: [
      // 将其添加在插件中
      new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true })
    ]
  }
}

需要注意的是,对于 webpack1 和 webpack2 这个插件的配置方法是不同的,差别比较细微,详情请看官方文档 extract text plugin for webpack 2

拆分业务代码与框架代码

通常一个 web 应用都会引用若干第三方库,这些第三方库通常比较稳定不会经常变动,但是如果将业务代码和框架代码打包在了一起,这样业务代码每次变动打包得到的结果都会变动,及时只改变了一个字符,浏览器也无法利用缓存,必须全部重新加载。因此,何不将第三方库单独打包在一起呢?

这里举个案例,一个 react 项目中使用了 react react-dom 这两个包,我希望将他们打包在一起,将业务代码打包在一起。

下面一步一步来:

1. 安装 react 和 react-dom:

npm i react react-dom --save

2. 配置 entry,output 和 loader

先使用单入口,让代码工作起来。另外因为使用了 react 所以要使用 babel-loader 来加载 js

// webpack.config.js

module.exports = {
  entry: 'index.js',
  output: {
    path: 'build/',
    filname: '[name]@[chunkhash].js'
  },
  module:{
    loaders:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  }
}

3. 编写业务代码

index.js:

import React from 'react';
import ReactDOM from 'react-dom';


var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<Hello name={'world'} />, document.getElementById('app'));

index.html:

<div id="app"></div>
<!--entry 为一个字符串,这个 chunk 的名字会是 main, 因此这里引入 main.js -->
<script src="build/main.js"></script>

启动 webpack-dev-server,打开浏览器这个时候应该能在页面上看到 hello world,这说明工作正常。

4. 拆分框架代码

为了拆分框架代码,我们需要增加一个入口,在这个入口中要包含 react react-dom

module.exports = {
  entry: {
    main: 'index.js',
    vendor: ['react', 'react-dom']
  }
  //...
}

单单像上面这样配置,打包后会得到 main.js 和 vendor.js,但会发现在 main.js 中依然包含了 react 和 react-dom 的代码,这是因为指定了入口后,webpack 就会从入口文件开始讲整个依赖打包进来,index.js 中引用了 react 和 react-dom 自然会被打包进去。要想达到之前所说的那个效果,还需要借助一个插件 —— CommonsChunkPlugin

5. 使用 CommonsChunkPlugin

这个插件的功能是将多个打包结果中公共的部分抽取出来,作为一个单独的文件。它符合目前的场景,因为 main.js vendor.js 中存在一份公共的代码,那就是 vendor.js 中的内容。(这个说法并不准确,这里只是指 react 和 react-dom 都被打包进了这两个文件)

let webpack = require('webpack');

module.exports = {
  entry: {
    main: 'index.js',
    vendor: ['react', 'react-dom']
  },
  //...

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 指定一个希望作为公共包的入口
    })
  ]
}

再进行打包,这个时候会发现 main.js 中的代码不在包含 react 的代码了。看似实现了我们的需求,但真实应用下并没有这么简单,在实际项目中 js 脚本通常都会给添加一个 MD5 的 hash 在后面,形如 app@709d9850745a4c8ba1d4.js 这样每次打包后,如果文件内容变了,后面的 hash 也会变动。就以上场景,会发现当我们修改了业务代码后,得到的 hash 是不同的,因此每次都会得到两个不同的打包结果。业务代码改变了,拆分出来的框架包也变了,这显然不符合初衷 —— 利用浏览器缓存。

这是因为 webpack 在打包的时候会产生一些运行时代码,比如 __webpack_require__ webpackJsonp 等等,这些函数是用来帮助 webpack 完成模块加载等功能的,业务代码的改变会导致业务代码打包后的 hash 值改变,而在 webpack 的运行时代码中实际上是保存了打包后的结果的文件名的,因为它在异步加载模块的时候需要用到。因此,下面需要做的是将 webpack 的运行时代码拆分出来。

修改 plugins 如下,将 name 修改为 names,并增加一个 init 的包名,执行打包,会发现 webpack 的运行时代码都被入该包内。

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'init']
  })
]

这样以来,修改了业务代码后,vendor 因为只引用了 react 和 react-dom 因此,业务代码的改变不会改变 vendor 这个包的内容,hash 也保持不变。但,也仅仅如此 如果你引用了其他模块,webpack 收集依赖的时候会给每个模块编一个号,引入其他模块会导致模块数改变,也就会导致编号改变,这个时候打包出来的 vendor 还是会改变。

那么到底该如何解决这个问题呢?在官方文档上没有找到解决方案。后面我会继续探索这一问题,找到解决方案后会及时更新到这里,如果你有解决方案,还请不吝赐教,谢谢。

希望本文所述对你有所帮助,webpack代码拆分内容就给大家介绍到这里了。希望大家继续关注我们的网站!

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 #Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 #Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 #Javascript
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
深入探究node之Transform
Jul 20 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
动态加载js的几种方法
2006/10/23 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
js数组去重的hash方法
2016/12/22 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
库房主管岗位职责
2013/12/31 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
租房协议书
2014/04/10 职场文书
预备党员党支部意见
2015/06/02 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
python tqdm用法及实例详解
2021/06/16 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python