开发者社区> 小旋风柴进> 正文

Webpack的Code Splitting实现按需加载

简介:
+关注继续查看

一. 什么是Code Splitting?

在最开始使用Webpack的时候, 都是将所有的js文件全部打包到一个build.js文件中(文件名取决与在webpack.config.js文件中output.filename), 但是在大型项目中, build.js可能过大, 导致页面加载时间过长. 这个时候就需要code splitting, code splitting就是将文件分割成块(chunk), 我们可以定义一些分割点(split point), 根据这些分割点对文件进行分块, 并实现按需加载.

二. Code Splitting的作用?

  1. 第三方类库单独打包:
    由于第三方类库的内容基本不会改变, 可以将其与业务代码分离出来, 这样就可以最大化的利用浏览器的缓存机制, 减少请求.
  2. 按需加载:
    Webpack支持定义分割点, 通过require.ensure进行按需加载.

三. 如何进行Code Splitting?

下面的代码是基于vue-cliwebpack-simple模板生成的演示文档

//cmd
vue init webpack-simple code_spliting_demo
复制代码

(一) 第三方类库单独打包

我们假设项目中引入了jquery.jsrespond.js, 那么我们可以在webpack.config.js中配置多入口来进行将这两个第三方类库单独打包.

  • webpack.config.js进行配置

    //webpack.config.js
    
    //在entry中添加相应第三方类库
    entry: {
        bundle: './src/main.js',
        vendor: ['./src/lib/jquery-1.10.2.min.js', './src/lib/respond.min.js']
    }
      
     //在plugins中添加CommonChunkPlugin
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'vendor',  
            filename: 'vendor.bundle.js'  
        })
    ]
    复制代码
  • 执行npm run build, 此时dist目录下生成了两个文件, 分别是build.jsvendor.bundle.js

    npm run build后的生成文件
  • index.html中引入, 注意: vendor.bundle.js优先于build.js引入

    //index.html
    
    <script src="/dist/vendor.bundle.js"></script>
    <script src="/dist/build.js"></script>
    复制代码

(二) 按需加载

我们可以在router中进行配置, 实现组件的按需加载, 在一些单个组件文件较大的时候, 采用按需加载能够减少build.js的体积, 优化加载速度(如果组件的体积较小, 那么采用按需加载会增加额外的http请求, 反倒增加了加载时间)

  • 这里, 我们增加3个组件,分别是A.vue, B.vue, C.vue

    //A.vue
    <template>
        <h1>这里是A.vue组件</h1>
    </template>
    
    //B.vue
    <template>
        <h1>这里是B.vue组件</h1>
    </template>
    
    //C.vue
    <template>
        <h1>这里是C.vue组件</h1>
    </template>
    复制代码
  • 在路由中进行配置 (注意:这里是为了方便, 是在app.js中添加的路由, 在实际的项目中, 路由应该单独抽取出来)

    //app.js
    
    import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    //AMD规范的异步载入
    const ComA = resolve => require(['./components/A.vue' ], resolve);
    const ComB = resolve => require(['./components/B.vue' ], resolve);
    const ComC = resolve => require(['./components/C.vue' ], resolve);
    
    const router = new VueRouter({
      routes: [
        {
          name: 'component-A',
          path: '/a',
          component: ComA
        },
        {
          name: 'component-B',
          path: '/b',
          component: ComB
        },
        {
          name: 'component-C',
          path: '/c',
          component: ComC
        }
      ]
    })
    
    new Vue({
      el: '#app',
      router: router,
      render: h => h(App)
    })
    复制代码
  • webpack.config.js中进行配置output.chunkFilename,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    //添加chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}
复制代码
  • 执行npm run build, 此时dist目录下生成了5个文件, 多出的3个文件,就是对应的A.vue, B.vue, C.vue这三个组件

    npm run build后生成的文件
CMD规范的异步载入

刚才在路由引入的时候, 使用的是AMD规范的异步载入. webpack提供了require.ensure()这个方法实现CMD规范的异步载入. 这同样也是webpack推荐的载入方式.想深入了解ensure, 请点击《webpack代码分离 ensure 看了还不懂,你打我》

  • 下面的代码是使用require.ensure()方法对路由进行配置
//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD风格的异步加载
// const ComA = resolve => require(['./components/A.vue' ], resolve);
// const ComB = resolve => require(['./components/B.vue' ], resolve);
// const ComC = resolve => require(['./components/C.vue' ], resolve);

//CMD风格的异步加载
const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})
复制代码
  • 执行npm run build后, dist目录下同样生成5个文件
    npm run build后生成的文件
    npm run build后生成的文件
  • 按需加载效果演示:
    按需加载效果演示
    按需加载效果演示
Lee_tanghui 发布在 https://www.jianshu.com/p/b3b8fb8a2336



原文发布时间为:2018年06月26日
原文作者:zhaiyy
本文来源掘金如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
判断当面的网页加载完成
if(document.readyState=='complete'){ window.alert('加载完成!');} ...
536 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
30170 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
14060 0
未能从程序集“System.ServiceModel”中加载类型“System.ServiceModel.Activation.HttpModule”。
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 在Windows Server 2008中的IIS服务器中部署WCF服务程序时,通过浏览器访问报出如下错误: “/TestService”应用程序中的服务器错误。 未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, P
1645 0
SAP WebIDE 是如何加载SAP UI5里自定义的XML view的 - JerryMaster.view.xml
Created by Jerry Wang, last modified on Nov 08, 2015 Route _routeMatched Signal SignalBinding _oConfig Customize your xml view file name:
22 0
2.1 类加载器、 双亲委派模型 -《SSM深入解析与项目实战》
2.1 类加载器、 双亲委派模型 -《SSM深入解析与项目实战》
805 0
Python之pandas数据加载、存储
Python之pandas数据加载、存储 0. 输入与输出大致可分为三类: 0.1 读取文本文件和其他更好效的磁盘存储格式 2.2 使用数据库中的数据 0.3 利用Web API操作网络资源 1. 读取文本文件和其他更好效的磁盘存储格式 pandas提供了一些用于将表格型数据读取为DataFrame对象的函数。 1.1 pandas中的解析函数: re
1799 0
SpringMVC项目中web.xml中的节点加载顺序问题
SpringMVC项目中web.xml中的节点加载顺序问题,之前以为web.xml中就是一些配置信息,和节点的顺序没有关系,后来才发现初始化时的加载顺序是和节点的顺序相关的。 完整的web.xml文件内容: contextConfigLocation classpath*:/spring/*.
687 0
漫谈JVM热加载技术(三)--- Hotcode2 Adapter
#Hotcode2中各个Adapter介绍 Hotcode2会在JVM启动阶段和应用运行阶段接入class文件的装载,也就是前一篇文章所说的**JVM Init阶段**和**Runtime阶段**。 Adapter按照使用场景也可以分为2类,一种用是在Init阶段,还有一种是用在Runtime阶段。 # 1 JVM Init阶段 Init阶段的Adapter是在AgentMain.
7032 0
2710
文章
6591
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载