记一次 React 项目的优化(webpack4 插件的使用)-阿里云开发者社区

开发者社区> 我是小助手> 正文

记一次 React 项目的优化(webpack4 插件的使用)

简介:
+关注继续查看

这里记录了自己在开发一个 React 项目时使用 Webpack 优化项目的过程,欢迎大家围观点赞或吐槽。

学习 React 时候,写了个个人博客站点。使用 webpack 作为打包工具,在这之前学习 webpack 时候,知道 webpack 有插件可以做资源压缩、抽离,以达到减小资源的体积,便于缓存资源的目的,但是开始这个项目时候并没有想立即使用 webpack 的插件带来的便利,主要是想先写完再来优化,也便于优化前后有个对比,便于深入的了解插件的作用。

源码地址: GiteeGithub

写完后项目打包后的main.js文件体积是 3.38 MiB,我部署使用的腾讯云 1 M 带宽的服务器,访问速度很慢。

看看此时 webpack.config.js 的配置:


const path = require('path');
var webpack = require('webpack');
const config = {
  entry: ['babel-polyfill','./src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',     // 打包输出,单文件输出
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'sass-loader',
        },],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build 结果:


 Asset      Size  Chunks             Chunk Names
main.js  3.38 MiB    main  [emitted]  main

3 M 的单文件实在是太大了。适当减少请求次数,减少单次请求的文件大小,这是做前端优化的重要手段。如何缩小这个单页面应用体积,或者适当拆分资源(利用浏览器可以同时下载多个资源的特性)来优化访问速度。

js压缩

去掉注释,减少空格可以减少无用字符占用的文件体积。webpack 插件 UglifyjsWebpackPlugin 官方对插件的介绍是用来缩小你 javascript 文件,对于我这个博客而言就是 main.js 文件。

webpack.config.js 配置如下:



const path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const config = {
  entry: ['babel-polyfill','./src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'sass-loader',
        },],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: false,
        mangle: true,
        output: { comments: false },
        compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true,
          unused: false,
         },
      },
      sourceMap: true,
      cache: true,
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build 输出:

  Asset     Size    Chunks             Chunk Names
main.js  3.1 MiB    main  [emitted]  main

可见资源减少了 0.28 MIB。

gzip 压缩

上面的 UglifyjsWebpackPlugin 插件带来的压缩效果可能并不能满足我们的要求。我们熟悉有一种打包压缩方式,将文件压缩为 zip 包,这种压缩效果显著,通常可以将文件成倍压缩,那么这种压缩方式能否在这里使用呢,答案是可以的。CompressionWebpackPlugin 插件就提供了这种功能,我们来引入看看效果。

webpack.config.js 配置如下:


const path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

const config = {
  entry: ['babel-polyfill','./src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js',
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'sass-loader',
        },],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: false,
        mangle: true,
        output: { comments: false },
        compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true,
          unused: false,
         },
      },
      sourceMap: true,
      cache: true,
    }),
    new CompressionPlugin(),
  ],
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build 结果:
....
 Asset     Size  Chunks             Chunk Names
   main.js  3.1 MiB    main  [emitted]  main
main.js.gz  544 KiB          [emitted]
....

可以看到,多出一个 main.js.gz 压缩包,只有 554 KiB,很惊喜有没有?只不过要使用这种压缩文件,nginx 需要配置支持,nginx 的 nginx_http_gzip_static_module 模块可以支持请求压缩包,nginx 配置如下:


...
server {
    gzip on;
    gzip_static on;
    gzip_min_length 1000;
    gzip_buffers 4 8k;
    gzip_types text/plain application/xml text/css text/js text/xml application/x-javascript text/javascript application/json application/xml+rss image/jpeg image/png image/g
    gzip_vary on;
    listen 80;
    location / {
    	...
    }
  }
...

这样浏览器端下载的资源就由原来的 3.38M 降到了 554K。

main.js 是个大杂烩 — css 提取

已经将文件压缩成 gzip 文件,从减少文件体积方面好像已经无计可施。但回头看看 main.js 文件,不难发现他是个即有 js 又有 css 的大杂烩,要是能把 css 抽离出来,是不是可以进一步减少单文件体积,虽然会多出一个 css 文件,多了次请求,但正好利用了浏览器的并发下载,从缓存资源角度来讲也是有利的。webpack 插件 extract-text-webpack-plugin 可以用来提取 css。但是需要注意的是 extract-text-webpack-plugin 只能用在 webpack 4 以下,webpack4 及以上版本需要使用 mini-css-extract-plugin

webpack.config.js 配置如下:


const path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  entry: ['babel-polyfill','./src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[hash:8].js',
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: false,
        mangle: true,
        output: { comments: false, },
        compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true,
          unused: false,
         },
      },
      sourceMap: true,
      cache: true,
    }),
    new CompressionPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
      chunkFilename: "[id].[hash:8].css",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build: 

Built at: 2018-06-21 08:03:57
               Asset       Size  Chunks             Chunk Names
   main.b2c90941.css    317 KiB    main  [emitted]  main
    main.b2c90941.js   2.69 MiB    main  [emitted]  main
          index.html  263 bytes          [emitted]
       index.html.gz  196 bytes          [emitted]
main.b2c90941.css.gz   33.4 KiB          [emitted]
 main.b2c90941.js.gz    501 KiB          [emitted]

可见 css 被取了出来,这里的提取效果没有想想中的理想,js 的体积缩小的并不多,原本 css 也不多。

html 文件自动生成: 抽离后文件自动在 html 页面引入

上一步抽离了 css,在打包的使用启用了 chunk hash,这样当 js 或者 css 文件有改动后运行 npm run build 每次生成的 js 和 css 的打包文件名是不同的,这样就有两个问题需要解决: 1、每次 build 后需要在 index.html 页面修改 css 和 js 文件的名称,2、多次修改后 build,会产生需要没用的 js、css 文件。针对这两个问题,大牛早已经给出了解决方案。

html-webpack-plugin 插件可以让我们指定生成 index.html 使用的模版文件,build 后会自动生成 index.html 文件,并将 css 和 js 文件自动引入到 html 文件。

clean-webpack-plugin 插件则可以帮我们在 build 的开始阶段,自动删除指定的目录或者文件。

webpack.config.js 配置如下:


const path = require('path');
var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  entry: ['babel-polyfill','./src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[hash:8].js',
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /(src)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    // build 开始阶段需要删除的文件
    new CleanWebpackPlugin(['build/*'], { 
      watch: true,
    }),
    // 指定生成 html 文件使用的模版文件
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: false,
        mangle: true,
        output: { comments: false },
        compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true,
          unused: false,
         },
      },
      sourceMap: true,
      cache: true,
    }),
    new CompressionPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
      chunkFilename: "[id].[hash:8].css",
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build

...
// 删除指定的文件
clean-webpack-plugin: /Users/wewin/reactLearn/redux-blog/build/* has been removed.
...
               Asset       Size  Chunks             Chunk Names
   main.ad06a35d.css    317 KiB    main  [emitted]  main
    main.ad06a35d.js   2.69 MiB    main  [emitted]  main
          index.html  265 bytes          [emitted]
       index.html.gz  196 bytes          [emitted]
main.ad06a35d.css.gz   33.4 KiB          [emitted]
 main.ad06a35d.js.gz    501 KiB          [emitted]
...

自动生成的 index.html 文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>redux blog</title>
    <link href="/main.ad06a35d.css" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/main.ad06a35d.js"></script>
  </body>
</html>

js 和 css 文件被自动引入到了 html 页面,上次 build 生成的文件,会自动被删除。

被打包的文件里到底有些什么 --- BundleAnalyzerPlugin

上面对文件的压缩,css 的提取都起到了减少 js 提交的作用,但是经过上面两个步骤后,最后打包的 main.js 仍有 501 KiB,想要进一步减少文件体积,我们就要清楚 main.js 文件里到底有些什么,是什么导致了文件如此庞大。BundleAnalyzerPlugin 插件可以帮我们分析出文件的组成,可以以文件的或者网页的形式展示给我们。配置和使用这里不做具体的说明。

公共 JavaScript 模块抽离

将公共的 JavaScript 模块抽离,避免重复的引入,可以有效的减少 js 文件体积。webpack 4 可以使用 SplitChunksPlugin 插件来提取共同的 js,在 webpack 4 以下版本可以使用 CommonsChunkPlugin 插件。

webpackge.config.js



const path = require('path');
var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  entry: ['babel-polyfill', './src/app.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[hash:8].js',
    publicPath: '/',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(['dist', 'build/*'], {
      watch: true,
    }),
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: false,
        mangle: true,
        output: { comments: false },
        compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true,
          unused: false,
         }
      },
      sourceMap: true,
      cache: true,
    }),
    new CompressionPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
      chunkFilename: "[id].[hash:8].css",
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'initial',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 2,
      maxInitialRequests: 2,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /\/node_modules\//,
          priority: -10,
        },
        'react-vendor': {
          test: (module, chunks) => /react/.test(module.context),
          priority: 1,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        }
      }
    }
  },
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 9000,
    open: true,
    inline: true,
  },
};

module.exports = config;

npm run build


                            Asset       Size             Chunks             Chunk Names
                 main.3413403b.js   8.33 KiB               main  [emitted]  main
   react-vendor~main.3413403b.css    318 KiB  react-vendor~main  [emitted]  react-vendor~main
    react-vendor~main.3413403b.js   2.68 MiB  react-vendor~main  [emitted]  react-vendor~main
                       index.html  355 bytes                     [emitted]
              main.3413403b.js.gz    3.2 KiB                     [emitted]
                    index.html.gz  214 bytes                     [emitted]
react-vendor~main.3413403b.css.gz   33.5 KiB                     [emitted]
 react-vendor~main.3413403b.js.gz    498 KiB                     [emitted]

这里对 splitChunks 的配置基本上使用的基本都是默认配置,splitChunks 的使用可以参考官网。提取 js 不但可以缩小文件体积,对 React React-dom 这种基础依赖的提取更有利于缓存。

这里主要是记录下自己在减少打包后的文件体积使用到的 webpack 的几个插件,希望对有相同需求的朋友有所帮助。

欢迎指正!



原文发布时间为:2018年06月25日
原文作者:其言

本文来源: 掘金 如需转载请联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用Weblogic的iisproxy、iisforward插件实现IIS转发
默认情况下,IIS只能提供http重定向功能,而无法满足转发需求。 举例:http://localhost/app1 利用http重定向到 http://www.abc.com/app1 访问 http://loalhost/app1/abc.html 最终浏览器地址栏里的url会变成http://www.abc.com/app1/abc.html 这就是重定向(类似jsp中的SendRedirect),如果浏览器地址栏不变,那才叫转发(类似jsp中的forward)。
777 0
一个JavaWeb项目中使用的部分技术
-- 2015年8月8日1. Web框架: Spring+ SpringMVC + MyBatis Spring: 作为容器,工厂,用于解耦以及管理对象生命周期。 整合各类框架和依赖。 MVC  : 配置,文档与源码结合在一起,减轻开发工作量,易维护,易测试. MyBatis: 灵活稳定,自由度高,与代码生成器结合使用,易集成,易开发,代码可读性良好。
995 0
使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...
757 0
SQL优化方案参考
SQL优化方案参考 在sql查询中为了提高查询效率,经常会采取一些措施对查询语句进行sql优化,下面是一些可供参考的方法: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。
992 0
《OpenACC并行程序设计:性能优化实践指南》一 3.12 参考文献
本节书摘来自华章出版社《OpenACC并行程序设计:性能优化实践指南》一 书中的第3章,第3.12节,作者:[美] 罗布·法伯(Rob Farber),更多章节内容可以访问云栖社区“华章计算机”公众号查看。
592 0
TypeScript在react项目中的实践
前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的实践以后,尝到了TS所带来的甜头,毫不犹豫的选择用TS+React来重构这个项目。
1943 0
响应式 Web 设计的 20 个有用的 jQuery 插件
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。
624 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1091 0
使用IntelliJ IDEA 14和Maven创建java web项目
原文:使用IntelliJ IDEA 14和Maven创建java web项目 http://mark.leanote.com/post/%E4%BD%BF%E7%94%A8IntelliJ-IDEA-14%E5%92%8CMaven%E5%88%9B%E5%BB%BAjava-web%E9%A1%B9%E7%9B%AE 安装Maven 下载安装 去maven官网下载最新版。
1273 0
+关注
我是小助手
云栖直播
384
文章
6
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载