webpack优化经验１(持续)

１ 不知道该优化哪里

先开启gzip压缩，这样可以很直接的减少请求包的体积，效果显著，不过需要在服务器端作相应的配置才能生效

２拆分vendor包, 减少单体包的体积，并行加载

通过配置，将不同的公用库拆分为多个公共包，并行加载，提高页面响应速度，这种方法不如第一种效果显著

３使用webpack-bundle-analyzer对现有bundle作分析

看看有哪些包可以拆出来做cdn，或者是使用率不高的，寻找可替换的，或者做瘦身

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

/*默认配置*/

new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
　　analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
　　analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
　　analyzerPort: 8888,
// 路径捆绑，将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
　　reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`，`parsed`或者`gzip`中的一个。
// 有关更多信息，请参见“定义”一节。
　　defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
　　openAnalyzer: true,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
　　generateStatsFile: false,
// 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
　　statsFilename: 'stats.json',
// stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
　　statsOptions: null,
　　logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})

在对应地址后面添加端口8888，即可得到一个可视化模块大小界面

4. 使用copy-webpack-plugin复制静态目录

工作中会有一些静态资源通常以链接的方式进行访问，不需要webpack进行加载、打包，譬如pdf、excel文件、视频等等。

这是我们通常会创建一个静态资源目录，然后在项目中使用相对路径或绝对访问，结构如