Webpack打包后体积过大的优化思路

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chencl1986/article/details/73835739

本文综合了几篇不错的文章,整理了处理Webpack打包后体积过大的思路,代码主要引自参考文章中,使用时需要根据Webpack版本做调整。
本文主要参考了如下几篇文章:
解决webpack打包文件过大的问题
webpack + react 优化:缩小js包体积
前端性能优化:webpack分离 + LocalStorage缓存
webpack react 文件压缩优化
【前端构建】WebPack实例与前端性能优化
Webpack 提取公共模块
Webpack按需打包Lodash的几种方式
webpack学习笔记(代码分割,按需加载)
webpack代码分离 ensure 看了还不懂,你打我

优化的具体思路如下:

  1. 去除devtool选项

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

    安装插件:
    
    npm install extract-text-webpack-plugin --save
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    ...
    
        loaders:[
          {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract("style-loader", "css-loader")
          },
          {
              test: /\.less$/,
              loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
          },
    
          ...
    
    ...
    
    plugins: [
        ...
    
        new ExtractTextPlugin("bundle.css")
    ]
  3. 使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码,使用方法如下:

    a. 使用命令:webpack -p
    b. 在webpack.config.js文件的plugins数组里面添加及配置插件,具体配置参考UglifyJS2文档

    new webpack.optimize.UglifyJsPlugin({
        warnings: false,
        compress: {
            join_vars: true,
            warnings: false,
        },
        toplevel: false,
        ie8: false,
    }),
  4. 将React切换到产品环境

    在plugins中添加插件
    
    new webpack.DefinePlugin({
      'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    打包时运行
    
    set NODE_ENV=production && webpack -p
  5. 分离第三方库

    在plugins中加入
    
    new webpack.optimize.CommonsChunkPlugin({
        filename:"common.js",
        name:"commons"
    });
  6. 按需打包Lodash

    使用Lodash时,往往只需要使用其中部分功能,但整个文件引入是不合理的,我们需要通过插件让Webpack按需引入模块。
    配置webpack.config.js
    
    var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
    var webpack = require('webpack');
    
    module.exports = {
        module: {
            loaders: [{
            loader: 'babel',
            test: /\.js$/,
            exclude: /node_modules/
         }]
     },
     babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime', 'lodash']
     },
     plugins: [
        new LodashModuleReplacementPlugin,
        new webpack.optimize.OccurrenceOrderPlugin,
        new webpack.optimize.UglifyJsPlugin
     ]
    }
  7. 异步加载模块

    对于直接require或import的模块,Webpack的做法是把依赖的文件都打包在一起,造成文件很臃肿。
    所以在写代码的时候要注意适度同步加载,同步的代码会被合成并且打包在一起。
    异步加载的代码会被分片成一个个chunk,在需要该模块时再加载,即按需加载。
    
    require.ensure([], function(require){
        var list = require('./list');
        list.show();
    }, 'list');
    此时打包后的js文件名为:list.fb874860b35831bc96a8.js
    
  8. 待补充

阅读更多

没有更多推荐了,返回首页