代码分割-CSS
要通过webpack打包CSS,像任何其他模块一样将CSS导入JavaScript代码,并使用css-loader(它输出CSS作为JS模块),
并可选地应用ExtractTextWebpackPlugin(它提取打包的CSS并输出CSS文件)。
导入CSS
使用 css
-loader
在 webpack.config.js 中配置 css-loader , 如下:
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: 'css-loader'
}]
}
}
这有个缺点,您将无法利用浏览器的异步和并行加载CSS的能力。这样,您的网页必须等待,直到您的整个JavaScript 包下载完成,然后重绘网页。
webpack可以通过使用ExtractTextWebpackPlugin分别打包CSS来帮助解决这个问题。

使用 ExtractTextWebpackPlugin
安装 ExtractTextWebpackPlugin 插件,如下:
npm i --save-dev extract-text-webpack-plugin@beta
要使用此插件,只需要在webpack.config.js文件中添加两个步骤。
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: 'css-loader'
use: ExtractTextPlugin.extract({
use: 'css-loader'
})
}]
},
plugins: [
new ExtractTextPlugin('styles.css'),
]
}
通过上述两个步骤,您可以专门为所有CSS模块生成新的bundle,并将它们作为单独的标记添加到index.html中。
代码分割 - 使用 require.ensure
webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
依赖 dependencies
这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。
回调 callback
当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。
chunk名称 chunkName
chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
require.ensure() 的坑点
空数组作为参数
require.ensure([], function(require){
require('./a.js');
});
以上代码保证了拆分点被创建,而且 a.js 被 webpack 分开打包。
依赖作为参数
require.ensure(['./a.js'], function(require) {
require('./b.js');
});
上面代码, a.js 和 b.js 都被打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用,但并没有被输出。
想去执行 a.js,我们需要异步地引用它,如 require('./a.js'),让它的 JavaScritp 被执行

webpack2代码分割的更多相关文章

  1. 【Web前端Talk】React-loadable 进行代码分割的基本使用

    随着项目功能的扩充.版本迭代,我们与Webpack捆绑起来的的项目越来越大,大到开始影响加载速度了.这时我们就该考虑如何对代码进行拆分了. 这次我们一起学习一下如何对React项目中的代码进行Code ...

  2. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  3. webpack练手项目之easySlide(二):代码分割(转)

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  4. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. react-router 4实现代码分割(code spliting)

    官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...

  6. webpack 代码分割一点事

    webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是c ...

  7. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

  8. webpack:代码分割与按需加载

    代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...

  9. webpack的代码分割/离

    两种方法: 1.webpack的methods----require.ensure 2.ES 2015的Loader spec //require.ensure语法 require.ensure [] ...

随机推荐

  1. 常用的Sublime Text插件及安装方法

    Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installatio ...

  2. codeforces 688D D. Remainders Game(中国剩余定理)

    题目链接: D. Remainders Game time limit per test 1 second memory limit per test 256 megabytes input stan ...

  3. 并不对劲的bzoj4199: [Noi2015]品酒大会

    传送门-> 又称普及大会. 这题没什么好说的……后缀自动机裸题……并不对劲的人太菜了,之前照着标程逐行比对才过了这道题,前几天刚刚把这题一遍写对…… 这题的输出和某两点相同后缀的长度有关,那么把 ...

  4. 思维导图js

    http://baike.baidu.com/view/1469162.htm?fromenter=Mind+Maps

  5. vss操作说明

    vss命令行   一.环境变量配置 “我的电脑”->“属性”->“高级”->“系统环境变量” 1) 添加追加环境变量 名称为:Path:值为:VSS应用程序所在目录 例如:D:\Pr ...

  6. uva 11401

    Triangle Counting Input: Standard Input Output: Standard Output You are given n rods of length 1, 2… ...

  7. 80个Python经典资料(教程+源码+工具)汇总——下载目录 ...

    原文转自:http://bbs.51cto.com/thread-935214-1.html 大家好,51CTO下载中心根据资料的热度和好评度收集了80个Python资料,分享给Python开发的同学 ...

  8. Cortex-M3 / M4 Hard Fault Handler (转载)

    转自大伟的,感谢大伟的帮助调试:http://www.cnblogs.com/shangdawei/archive/2013/04/30/3052491.html http://blog.frankv ...

  9. CodeForces 730H Delete Them (暴力)

    题意:给定n个名字,然后让你删除 m 个,且这m个必须满足同一个表达式且其他的不满足,问你能不能找到一个满足条件. 析:很明显首先知道的是这 m 个如果第 i 个位置相同,那么就肯定选这个位置是最好的 ...

  10. 51nod 1190 最小公倍数之和 V2【莫比乌斯反演】

    参考:http://blog.csdn.net/u014610830/article/details/49493279 这道题做起来感觉非常奇怪啊--头一次见把mu推出来再推没了的-- \[ \sum ...