标签:不能 chart rect row ports size 文件的 one 引入
一.缩小文件的搜索范围module.exports = {
module: {
rules: [{
test: /\.js?$/,
include: path.resolve(__dirname, ‘app‘),
use: {
loader: ‘babel-loader?cacheDirectory‘,
options: {
presets: [‘es2015‘, ‘react‘, "stage-0"]
}
}
}],
},
}
二. 使用DLLPLUGIN
为什么web项目构建介入动态连接库的思想后,会大大提升构建速度呢?原因在于,包含大量复用模块的动态链接库只需被编译一次,在之后的构建过程中被动态链接库包含的模块将不会被重新编译,而是直接使用动态连接库中的代码。要给web项目构建接入动态链接库的思想,需要完成以下事情。
三. 使用HappyPack
HappyPack 是通过把loader交给程序多进程去并发处理,由于js是单线程,只能通过多进程去发挥cpu的功能。配置也相对简单。
四. 使用Tree Shaking
TreeShaking可以用来提出JavaScript中用不上的死代码.它依赖静态的ES6模块化语法。Webpack2.0版本经已内置。从一简单例子解释Tree Shaking的作用。假如有一个文件util.js里存有两函数。在main.js引入和使用util.js
util.js源码如下export function funcA(){<br/>}<br/>export function funcB() {<br/>}<br/>
main.js源码如下import { funcA } from ‘./util.js‘ funcA()
经过TreeShaking后 util中funcB函数没有被引入使用就会被TreeShaking当作死代码剔除。
接下来讲解如何配置Webpack让Tree Shaking,以react项目为例子。
首先修改babel的规则presets: [["env, { modules: false }"], ‘react‘, ‘statge-0‘]
其中modules: false的含义是关闭Babel的模块转换功能,保留原本的ES6模块化语句。
修改第三方库的引入文件规则
以redux为例子,其发布到Npm上的目录结构为:
|-- es
---- index.js
|-- lib
---- index.js
package.json
在package.json有两个字段
"main": "lib/index.js", // 采用commonJs模块化入口
"jsnext:main": "es/index.js", // 采用es6模块化入口
以下配置的含义优先使用jsnext:main作为入口,即采用es6模块化入口代码。
modules.exports = {
resolve: {
mainFields: [‘jsnext:main‘, ‘browser‘, ‘main‘],
},
}
然后配合UglifyJS插件处理一遍代码,即可剔除死代码,提高构建速度。
如出现当前问题只需npm install babel-preset-env -D安装babel-preset-env依赖即可。
五.使用ParalleUglifyPlugin
ParalleUglifyPlugin采用多进程压缩代码,每个进程还是通过UglifyPlugin去压缩代码。
更多参数配置详见https://www.npmjs.com/package/webpack-parallel-uglify-plugin
标签:不能 chart rect row ports size 文件的 one 引入
原文地址:http://blog.51cto.com/13592056/2067790