Webpack如何打包才能尽可能的缩小体积(详解)

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
当前各大主流框架默认配备的打包方案，对其如何使用，已有较完备中英文文档；并且，各主流框架也有对应 CLI 予以基础配置，故不作为探讨范畴。从产品层来讲，如何使得构建的包体积小、运行快，这有必要不断摸索实践，提炼升级，使之臻于最佳。本文将从以下些许方面，对 Webpack 打包体积方面，做下优化探讨

1、去除不必要的插件

刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。

2、去除devtool选项

很多教程都会教你在webpack.config.js中设置devtool选项，比如devtool: 'eval-source-map'。但是这只适用于开发环境，这会造成打包的文件往往有几M，所以在生产环境必须去除此配置

3、分离CSS    安装插件：npm install extract-text-webpack-plugin --save

  1. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  2. //webpack.config.js
  3. ...
  4. loaders:[
  5. {
  6. test: /\.css$/,
  7. loader: ExtractTextPlugin.extract("style-loader", "css-loader")
  8. },
  9. {
  10. test: /\.less$/,
  11. loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
  12. },
  13. ...
  14. ...
  15. plugins: [
  16. ...
  17. new ExtractTextPlugin("bundle.css")
  18. ]


4、使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码，使用方法如下：
  1. plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({ warnings: false,
  2. compress: {
  3. join_vars: true,
  4. warnings: false,
  5. },
  6. toplevel: false,
  7. ie8: false,
  8. }),]

5、 提取第三方库 像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置

  1. {
  2. entry: {
  3. bundle: 'app'
  4. vendor: ['react']
  5. }
  6. plugins: {
  7. new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
  8. }
  9. }


6、webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。可以像这样添加

  1. var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  2. module.exports = {
  3. entry:
  4. {
  5. main:'./main.js',
  6. },
  7. output: {
  8. path:__dirname+'/dist',
  9. filename: '[name].js'//不使用[name]，并且插件中没有filename，这输出文件中只用chunk.js的内容，
  10. main.js的内容不知跑哪里去了
  11. },
  12. plugins: [
  13. new CommonsChunkPlugin({
  14. name:"chunk",
  15. filename:"chunk.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
  16. })
  17. ]
  18. };

7、按需打包

使用Lodash时，往往只需要使用其中部分功能，但整个文件引入是不合理的，我们需要通过插件让Webpack按需引入模块。
配置webpack.config.js

  1. var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  2. var webpack = require('webpack');
  3. module.exports = {
  4. module: {
  5. loaders: [{
  6. loader: 'babel',
  7. test: /\.js$/,
  8. exclude: /node_modules/
  9. }]
  10. },
  11. babel: {
  12. presets: ['es2015'],
  13. plugins: ['transform-runtime', 'lodash']
  14. },
  15. plugins: [
  16. new LodashModuleReplacementPlugin,
  17. new webpack.optimize.OccurrenceOrderPlugin,
  18. new webpack.optimize.UglifyJsPlugin
  19. ]
  20. }


赞 (0)

相关推荐