webapck 2的代码分片

iKcamp 发布于2019-08-20 15:33 / 3396人阅读

摘要：前端的代码分片，或者说是按需加载，本质上是由于前端页面越来越复杂，代码体积越来越大，程序员需要对页面资源的加载做细粒度的控制。这里需要说一下的是的第三参数，是这个分片的。

前端的代码分片，或者说是按需加载，本质上是由于前端页面越来越复杂，代码体积越来越大，程序员需要对页面资源的加载做细粒度的控制。按需加载当然是好东西，但是会让页面逻辑变得更加复杂。好在webpack出现，让按需加载变得简单多了。

我们来做一个简单的demo，完整代码
demo的功能很简单，单击一个按钮，然后去加载一个js文件并执行。

index.html文件:

index.js文件

document.getElementById("btn").addEventListener("click",function(){
    require.ensure([],()=>{
        let hello = require("./Hello").default;
        hello();
    },"Hello")
})

Hello.js文件

export default function hello(){
    alert("hello.")
}

在 click 的事件处理函数中,通过 require.ensure标记分割点，然后加载Hello.js并赋值给变量hello，最后调用该方法。这里需要说一下的是require.ensure的第三参数，是这个分片chunk的name。如果不加这个参数，默认会以chunkid来命名该文件。这个参数在开发环境还是很有用的，毕竟1.js的文件名，让人很难定位文件。

由于 ES2015 Loader spec 定义了 import() 方法来在运行时动态的加载javascript文件，所以webpack也把import()作为split code的分割点。

如果想用酷炫的import()语法，还需要安装一个插件:
npm i babel-plugin-syntax-dynamic-import --save-dev。然后，就可以把上面的 index.js文件改成：

document.getElementById("btn").addEventListener("click",function(){
   import("./Hello").then((Hello) => {
        let hello = Hello.default;
        hello();
    }).catch(err => console.log("Failed to load moment", err))
})

import()支持promise语法，所以可以用catch来处理加载文件引起的异常。但是，它也有它的弱点，import()无法给这个文件命名（类似于require.ensure的第三个参数），这样打包出来的文件都是用数字来标示的，非常难以区分，在开发环境下，会使定位错误变的更加困难。

此外，这两种语法在引用文件时，文件路径都不可以是表达式。例如：

 require.ensure([],()=>{
        let path = "./Hello";
        let hello = require(path).default;
        hello();
    },"Hello")

这样会报错，无法正常加载文件。

GPU云服务器云服务器 webapck 源代码2 分片上传分片上传删除分片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82334.html

百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录

摘要：百度地图创建标签进行加载使用百度地图需要百度地图添加扩展，用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题，详见另外也可以考虑使用动态创建标签的方法，类似百度地图加载百度地图因为本身支持的 webpack+百度地图创建 script标签进行加载 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 评论0 收藏0
webapck将css 打包后单独提取到一个css文件中

webpack4 提倡，一旦用了这个，不能使用style-loader 以及css module 安装 npm install --save-dev mini-css-extract-plugin rules rules: [ { test: /.css$/, use: [ { loader: MiniCssExtractPlug...

DevTTL 2019-08-23 14:02 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
webpack的教程

摘要：有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。指定执行的方法命令。这时候我们再看一下目录会多出来一个目录说明你的处女终于破了。唠唠嗑前几天在学习webpack时,踩过很多坑，也听过webapck是多么的哔哔哔哔~~，本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时...

Zhuxy 2019-08-19 17:14 评论0 收藏0
vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0