React部署到腾讯云上访问速度慢（上）---- 前端解决方案

作者: 艾剪疏 | 来源:发表于2018-07-06 09:07 被阅读50次

原因主要还是React打包生成的.js文件过大，导致访问的速度很慢，所以要想办法压缩.js文件的大小。

这是项目部署时，各个文件的大小。

image.png

app.js的文件达到了1400多kb，腾讯云的访问速度大概需要15~20s（首屏渲染时间超过1.5s都是不能忍的）。

抛开代码内部可优化的问题，主要是因为使用了antd-design的库（已经使用了antd-design的按需加载），这个东西挺大的。

下图是我在使用按需加载之后，且把antd-design的打包至vender.js中后的结果。

app.js明显减小，但vender.js明显增大。

image.png

这个问题，暂时还没找打很好的解决方法，下面把自己打包的配置记录一下（查阅了很多资料，做个记录）。

1 优化思路

前台js代码压缩
后台优化

2 前台优化方法

1 压缩时去掉js所有注释，包括copyright信息。

在webpack.config.js文件的plugins数组里面添加及配置插件即可。

new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,  // remove all comments
      },
      compress: {
        warnings: false
      }
    })

2 将React切换到产品环境，参考如下：

在plugins里面添加：

 new webpack.DefinePlugin({
      'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),

这时候注意打包的时候要带上node的环境设置，例如：
NODE_ENV=production webpack --config webpack.production.config.js --progress

3 分离css

先安装webpack插件：
npm install extract-text-webpack-plugin --save

在webpack配置文件中使用插件：

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")
]

4 分离出业务代码和第三方库

entry: {
    bundle: path.join(__dirname, '../src/index'),
    vendor: ['react', 'react-dom', 'jquery','react-router']
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js'),
  ]

附上完整的webpage配置文件：

var webpack = require("webpack");
var path = require('path');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname); // 项目跟路径
var APP_PATH = path.resolve(ROOT_PATH, 'app'); // 项目开发目录src
var APP_FILE = path.resolve(APP_PATH, 'index.jsx'); // 项目入口的index.js
var DIST_PATH = path.resolve(ROOT_PATH, 'dist'); // 项目打包输出路径

module.exports = {
  entry: {
    app: APP_FILE,
    venders: [
      'react',
      'react-dom',
      'react-router',
      'antd',//这里直接会把所有antd打包
    ]
  },
  output: {
    path: DIST_PATH,
    //表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换
    //publicPath: '/',
    filename: '[name].js',
    chunkFilename: 'js/[name].[chunkhash:5].min.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192&name=image/[hash:8].[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json', '.less']
  },
  plugins: [
    // new webpack.ProvidePlugin({ $: "jquery" }), // 这是将jquery变成全局变量，不用在自己文件require('jquery')了
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production') //定义生产环境
      }
    }),
    new webpack.optimize.CommonsChunkPlugin('venders', 'venders.js'), // 这是妮第三方库打包生成的文件
    new uglifyJsPlugin({
      output: {
        comments: false, // remove all comments
      },
      compress: {
        warnings: false
      }
    }),
    // new webpack.optimize.DedupePlugin(), //删除类似的重复代码
        // new webpack.optimize.UglifyJsPlugin(), //最小化一切
    // new webpack.optimize.AggressiveMergingPlugin(),//合并块
    // new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin("[name].css"),
    new HtmlWebpackPlugin({
      template: './app/index.tmpl.html', // html模板路径
      htmlWebpackPlugin: {
        files: {
          css: ["app.css"],
          js: ["bundle.js", "venders.js"]
        }
      },
      minify: {
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        removeAttributeQuotes: true // 移除HTML中的属性引号
      },
      filename: 'index.html',
    })
  ]
};

package.json打包命令。

  "scripts": {
    "start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
    "build": "rimraf dist/* && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors",
    "mock": "node --harmony ./app/common/mock.js"
  },