webpack中实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.js,但是这样看着不是很直观,所以要自己配置单独打包的chunk名字,好吧开始踩坑
最初的代码:
1
2
3
4
5
6
7
|
window.onclick= function (){ require.ensure([], function (){ var $=require( 'jquery' ) console.log($( "body" )); require( "./c" ); }, "oth" ); } |
这里有三个参数,第一个参数是个数组,标明依赖的模块,这些会提前加载,第二个是回调函数,在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件,当点击时就会加载单独打包的chunk。这里的坑是,我想自己设置个名字叫oth,但是打包后仍然是webpack自动配置的名字,并且路径也不对,这让我郁闷好久啊,官方文档直说配置个名字就可以单独打包成自己写的名字了,根本没说还需要配置什么,终于找了好久终于在网上看到有人说还需要配置chunkFilename,和publicPath,好吧去看这俩的文档解释,才发现在介绍publicPath时提到了按需加载,并且说的不是很直接,意思就是按需加载单独打包出来的chunk是以publicPath会基准来存放的。好吧,另外还要配置chunkFilename:[name].js这样才会最终生成正确的路径和名字
1
2
3
4
5
6
7
8
|
module.exports={ entry: './src/js/a.js' , output:{ path:path.resolve(__dirname, "./dist" ), filename: 'js/a.bundle.js' , publicPath: "./" , chunkFilename: 'js/[name].js' }
|
注意:
这个是wbpack1的用法,后续版本中被import()替代了哦。
webpack中实现按需加载的更多相关文章
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- .NET中的按需加载/延迟加载 Lazy<T>
业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载 延迟初始化出现于.NET 4.0,主要用于 ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- AngularJS中的按需加载ocLazyLoad插件应用;
一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越 ...
- webpack require.ensure 按需加载
使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js.当使用存在多个路由代码的时候,index.js可能会超大,影响加载速度. 这个每个路由页面除了i ...
- webpack 事件触发 按需加载
比较易懂, 方法简单 var util_sync = require('./util-sync.js') alert(util_sync.data) document.getElementById(& ...
随机推荐
- Linux.挖矿.cpuminer方法记录
挖矿一般都要用高端显卡做矿机, 不是一般人玩得起 这里讲的是一种用CPU来挖矿的方法, 纯玩玩, 不要指望能致富喔 本方法在CentOS和树莓派原生系统上测试通过 先从git下载cpuminer gi ...
- Memcached查找命令
Memcached各个查找命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下 key:键值 key-value 结构中的 key,用于查找缓存值. noreply(可 ...
- JQuerymobile实例源代码
首页我们先来解释一下下JQuerymobile是什么,jQuery Mobile是JQuery 框架的一个组件(而非jquery的移动版本).jQuery Mobile是一款基于HTML5的用户界面系 ...
- LeetCode 501. Find Mode in Binary Search Tree (找到二叉搜索树的众数)
Given a binary search tree (BST) with duplicates, find all the mode(s) (the most frequently occurred ...
- JQ编写楼层效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Android: Only the original thread that created a view hierarchy can touch its views 异常
最近自己再写一个小项目练手,创建一个线程从网络获取数据然后显示在 recyclerView 上.写好后发现页面能够显示,但是有时候会把请求的数据显示过来,有时候不会.点开 android monito ...
- oracle数据库显示所有用户方法
sql>show user查看自己的是哪个用户sql>select * from all_users; 查询所有用户sql>select * from user_users;查询当前 ...
- 三星R428 内存不兼容金士顿2G DDR3
京东上买了个金士顿2G DDR3, 回家装上之后发现不兼容, 原机带的是三星DDR3 1066的2G条子,买的是 金士顿DDR3 2G 1333的条子,结果单独插任何一根都好使,两个插槽均无问题,但是 ...
- Linux 文件系统模型
声明:本文仅限于 cnblogs 发布,其他第三方网站均为盗版,原文地址:Linux 文件系统模型 在 Linux 环境下有过一些经历的同学可能都会遇到一个问题,这个问题就是往机器上插入 U盘 或者其 ...
- linux系统下手动安装Angular-cli
安装Angular-cli 背景 由于公司linux服务器没有外网,无法通过npm包管理器直接安装,只能手动安装一个Angular-cli平台环境! 安装步骤 1. 先再linux系统下安装好node ...