威尼斯人线上娱乐,本文介绍了webpack学习笔记之代码分割和按需加载的实例详解,分享给大家,也给自己留个笔记

1. 普通加载

为什么需要代码分割和按需加载

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:

代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中。

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'

举个简单的例子:

这样做的结果就是webpack在npm run
build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载

1.一个HTML中存在一个按钮

2. webpack的require.ensure()实现按需加载

2.点击按钮出现一个包着图片的div

语法:require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

3.点击关闭按钮图片消失

  1. dependencies:字符串构成的数组,声明 callback
    回调函数中所需的所有模块,模块作为依赖被加载
  2. callback:只要加载好全部依赖,webpack 就会执行此函数。require
    函数的实现,作为参数传入此函数。当程序运行需要依赖时,可以使用
    require() 来加载依赖。函数体可以使用此参数,来进一步执行 require()
    模块。
  3. errorCallback:当 webpack 加载依赖失败时,会执行此函数。
  4. chunkName:由 require.ensure() 创建出的 chunk 的名字。通过将同一个
    chunkName 传递给不同的 require.ensure()
    调用,我们可以将它们的代码合并到一个单独的 chunk
    中,从而只产生一个浏览器必须加载的 bundle。

Demo目录:

使用方法一:

威尼斯人线上娱乐 1

require.ensure([], function(require){
  require('./a.js');
});
// 此时会单独打包出一个js文件,没有自定义名称的话,会被命名为1.js(有hash时候会带上md5)

一.当未点击按钮时浏览器只加载了对入口文件打包后的js

使用方法二:

威尼斯人线上娱乐 2

require.ensure(['./a.js'], function(require) {
  require('./b.js');
});

二.点击按钮会对组件进行异步加载

1、此时a.js作为依赖被加载,但是没有被执行(官方文档说的only loads the
modules)
2、a.js和b.js会被打包成一个文件。
3、回调函数里只require了b.js,只有b.js的内容会被执行。
4、如果你需要使用a.js的内容,需要再加上require(‘./a.js’)

威尼斯人线上娱乐 3

require.ensure(['./list'], function(require){
  var list = require('./list');
  list.show();
});

这个clichunk就是我们打包好的click组件,包括相应的JS逻辑html和css

给require.ensure的第一个参数传了[‘./list’],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行list.js模块中的代码,也就是webpack官网说的,不会进行evaluate。真正进行evaluate的时候是到了后面这句var
list = require(‘./list’);这就是所谓的懒执行。

例子源码记录

写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。

1.编辑入口文件

vue中使用

window.onload=function(){
     var _cs=require('./index.css');
     var $=require('jquery');

     $('#_click').on('click',function(){
       require.ensure([],function(require){
         var _click=require('./_clickWindow.js');
         if(!_clickEvent){
           console.log(_click);
           var _clickEvent=_click._clicks;
         }
         new _clickEvent();
       },'cli')
     });
};
comst List = resolve => {
  require.ensure([],() => {
    resolve(require('./list'))
  },'list')
}

webpack将一切视为模块,CSS,js,html,JSX等等。

其实resolve的作用就是Promise里面那个resolve,在这里就是定义一个异步的组件

var _cs=require('./index.css');

使用动态 import语法

引入对应的css模块。这就需要我们安装css-loder和style-loader。

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');
const router = new VueRouter({
 routes: [
  { path: '/foo', component: Foo }
 ]
})
// /* webpackChunkName: "foo" */使用命名chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
// webpack要加配置 output需要加个chunkFilename
chunkFilename: '[name].js'

威尼斯人线上娱乐 4 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

–save -dev的目的是为了在package.json文件的devDependencies写入依赖项。

您可能感兴趣的文章:

点击按钮时,加载定义好的组件,当加载完成后执行组件里的方法。

首先要学习require.ensure方法:

在commonjs中有一个Modules/Async/A规范,里面定义了require.ensure语法。webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。用法如下:

require.ensure([], function(require){
  var list = require('./list');
  list.show();
});