webpack打包优化解决⽅案
bug问题：
单页应⽤⾸次进⼊项⽬会获取⼀部分数据，之后将JS包分⽚，⾛到那块再去加载那块的JS。 这样跨页⾯重复的JS，CSS不必再去获取，跨页⾯就不会出现进度条。这样减少了等待时间，提升了⽤户体验，省去了不必要的流量。 但是单页应⽤也有⼀个显著的问题：⾸次进⼊的时候，加载的资源太多，⽩屏时间太长。
1使⽤插件查看项⽬所有包及体积⼤⼩ 2webpack外部扩展 3DLL⽅式
⼀、查看项⽬打包郑卓涵
webpack有个插件，可以查看项⽬⼀共打了多少包，每个包的体积，每个包⾥⾯的包情况。 ⾸先下载插件
npm intall webpack-bundle-analyzer --save-dev
开学注意事项
同时在fig.js配置
const BundleAnalyzerPlugin =require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
在package.json中添加命令
“script”:{
"analyz":"NODE_ENV=production npm_config_report=true npm run deploy:prod"
}
我的webpack是1.X的 webpack 2.X的同学请看
然后命令⾏输⼊
npm run analyz
开始构建，根据项⽬⼤⼩不同，时间也不同。 过⼀会输出结果如下：
⼆、webpack外部扩展
列出了项⽬中较⼤的包，剩下的事情就是想办法如何减⼩这些包的体积（将⼀个⼤包拆成多个⼩包）。 项⽬中产⽣较⼤的包的原因可以从两个⽅⾯去考虑：
项⽬中引⼊的依赖包过于庞⼤； 业务代码集中在⼀块写，或者是业务代码写的⽐较繁琐； 对于这两个问题，我们可以从两个⽅⾯着⼿解决：
抽离项⽬中公共依赖的、不常变动的、体积较⼤的包； 将⼀个较⼤的业务代码⽂件，拆成多个较⼩的⽂件，异步加载（或者优化业务代码）。 这⾥⾯第⼆项涉及到改动业务代码，具体的情况就不同了，适合查看 如何优化JS代码。 我们来讨论第⼀种⽅法，在不改动业务代码的情况下，如何减⼩公共依赖。
要知道这些依赖是我们需要的，不可能排除不引⼊。 但是他们都是全局依赖的，万年不变的，可以使⽤浏览器⾃⼰的缓存来实现不重复加载。 具体做法就是： 将项⽬中需要的⼀些公共依赖包，并且不常变动的，单独取出，不再每次都打包编译（如React，Redux等）。 ⽽是通过使⽤script标签形式cdn引⼊，这样在有缓存的情况下，这些资源均⾛缓存，不必加载。
具体做法：
总结需要抽离的公共依赖。
这些依赖需要满⾜⼀定的条件：
体积较⼤； 不常更新； 依赖较多； 是前置依赖； 常见的满⾜这类条件的包有：
react react-dom redux react-redux moment jquery 另外⼀些包⽂件如 Antd库⽂件，整个包较⼤，但是每次⽤什么取什么的话，库⽂件也会按需加载，不必单独取出。 还有这类库⽂件不建议单独取出，因为⾥⾯可能会有bug，需要更新。
使⽤CDN引⼊资源
以我的demo为例：我需要抽离出的⽂件有 react，react-dom，react-router，redux，react-redux，history。 将这些⽂件放到cnd 上，注意，这些⽂件要是压缩版本，并且是⽤ES5编写的，否则浏览器报错。
<head>
<title>React Starter Kit</title>
<meta chart="utf-8">
南昌旗舰店
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--体积较⼤的包-->
<script src="/react/15.0.0/react-with-addons.min.js"></script>
<script src="/react/15.0.0/react-dom.min.js"></script>
<script src="/react-router/3.0.0/ReactRouter.min.js"></script>
普洱茶隔夜能喝吗<script src="/redux/3.6.0/redux.min.js"></script>
<script src="/react-redux/5.0.1/react-redux.min.js"></script>
<script src="/history/4.5.0/history.min.js"></script>
</head>
配置f.js
资源已经引⼊，接下来需要配置webpack，使其打包的时候不在将这些资源打包。
const webpackConfig ={
name:'client',
target:'web',
devtool: piler_devtool,
resolve:{
root: paths.client(),
extensions:['','.js','.jsx','.json'],
},
externals:{
'react':'React',
'react-dom':'ReactDOM',
'react-router':'ReactRouter',
'redux':'Redux',
'history':'History'
},
module:{},
}
这⾥externals告诉webpack那些资源从哪⾥寻找。 该对象的键表⽰ require 或者 import 时候的字符串 值表⽰的当前环境下的变量，⽐如引⼊React之后，React被作为全局对象，webpack就回去寻找React对象。 如果其中有⼀个找不到，打包就会失败。
配置vendor.js
接下来配置vendor，使vendor也不打包该些JS
compiler_vendors :[
// 'react',
// 'react-redux',
// 'react-router',
小麦品种// 'redux',
],
接下来再次运⾏ npm run analyz
对⽐第⼀次的效果图，很明显app.js由原来的625kb减少到了78kb， 原来第⼆⼤的vendor.js现在已经很⼩了。 但是要注意的是，并不是包越⼩越好，越⼩的包反⽽越耗费链接。 应该让你的包⾥⾯的业务代码占⼤多数。 后来被告知，最⼤的包的体积压缩之后80k以内就可以。
三、DLL⽅式
dll 全称是：dynamic link library（动态链接库） dll⽅式也就是通过配置，告诉webpack指定库在项⽬中的位置，从⽽直接引⼊，不将其打包在内。 上⾯介绍的⽅式是将包放到cdn上，build的时候不在引⼊对应的包； dll⽅式就是指定包在项⽬中，build的时候不在打包对应的包，使⽤的时候引⼊。 webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能。
新建fig.js
const webpack =require('webpack');
entry:{
bundle:[
'react',
'react-dom',
//其他库
],
},
output:{
path:'./build',
filename:'[name].js',
library:'[name]_library'
},
plugins:[
new webpack.DllPlugin({
path:'./build/bundle.manifest.json',
name:'[name]_library',
})
]
};
webpack.DllPlugin选项：
path：manifest.json⽂件的输出路径，这个⽂件会⽤于后续的业务代码打包； name：dll暴露的对象名，要跟output.library保持⼀致; context：解析包路径的上下⽂，这个要跟接下来配置的 fig.js ⼀致。
运⾏⽂件
运⾏：webpack --config fig.js
⽣成两个⽂件，⼀个是打包好的bundlejs，另外⼀个是bundle.mainifest.json，⼤致内容如下：
{
"name":"bundle_library",
"content":{
"./node_modules/react/react.js":1,
"./node_modules/react/lib/React.js":2,
"./node_modules/process/browr.js":3,
"./node_modules/object-assign/index.js":4,
"./node_modules/react/lib/ReactChildren.js":5,
"./node_modules/react/lib/PooledClass.js":6,
"./node_modules/react/lib/reactProdInvariant.js":7,
巴洛克式建筑/
/其他引⽤
}
压腿的正确方法配置fig.js
const webpack =require('webpack');
var path =require('path');
entry:{
main:'./main.js',
},
output:{
path: path.join(__dirname,"build"),
publicPath:'./',
filename:'[name].js'
},
module:{
loaders:[
{ test:/\.(png|jpg)$/, loader:'url-loader?limit=8192'},
{
test:/\.jsx?$/,
loaders:['babel-loader?prets[]=es2015&prets[]=react'],
include: path.join(__dirname,'.')
}
]
},
plugins:[
new webpack.DllReferencePlugin({
context:'.',
manifest:require("./build/bundle.manifest.json"),
}),
花木兰歌词]
};
webpack.DllReferencePlugin的选项中：
context：需要跟之前保持⼀致，这个⽤来指导webpack匹配manifest.json中库的路径； manifest：⽤来引⼊刚才输出的manifest.json ⽂件。
