react項目打包優化，加速首屏加載

這里主要是對webpack配置進行項目的代碼壓縮優化（本文只針對webpack2打包正式環境時配置）

1.首先要對webpack設置NODE_ENV

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

2.對js壓縮

//這個使用uglifyJs壓縮你的js代碼
new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    output: {
        comments: false,  // remove all comments
    },
        compress: {
                warnings: false
        }
}),

3.對css壓縮

在使用loaders時

{
    test: /\.(css|scss)$/,
    include: APP_PATH,
    use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader?minimize',
        loader: ['css-loader?minimize', 'sass-loader?minimize']
    })
},

再使用插件extract-text-webpack-plugin

new ExtractTextPlugin('css/[name]-[hash:8].css')

4.對html壓縮，使用html-webpack-plugin插件

new HtmlwebpackPlugin({
          title: 'react-ele-webapp',
          template: path.resolve(ROOT_PATH, 'publish.html'),
          filename: 'index.html',
          // chunks: ['app', 'vendors'],
          minify: {
               caseSensitive: false,             //是否大小寫敏感
               collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled 
               collapseWhitespace: true         //是否去除空格
          },
          inject: 'body'
}),

 

我的配置，webpack.config.pub.js

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);        
var APP_PATH = path.resolve(ROOT_PATH, 'src');            
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');        


module.exports = {
    entry:{
        // vendor: ['react','react-dom','react-router','redux','react-redux'],
        app: [path.resolve(APP_PATH,'app.js')],
    },
    output:{
        path: BUILD_PATH,
        publicPath: './',     //后面的就直接css/style.css  imgs/img.png
        filename:'js/[name]-[hash:8].js',
        // chunkFilename: 'js/[id].js'
    },
    resolve:{
        extensions:['.js','.jsx']
    },
    //啟動dev source map，出錯以后就會采用source-map的形式直接顯示你出錯代碼的位置。
    // devtool:'eval-source-map',
    // devServer:{
    //     historyApiFallback:true,
    //     hot:true,
    //     inline:true,
    //     proxy:{
    //         '/api/*':{
    //             target:'http://localhost:8080',
    //             secure:false
    //         }
    //     }
    // },
    module:{
        loaders: [
          {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            include: APP_PATH,
            query: {
              //添加兩個presents 使用這兩種presets處理js或者jsx文件
              presets: ['es2015', 'react','stage-0']
            }
          },
          {
            test: /\.(css|scss)$/,
            include: APP_PATH,
            use: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader?minimize',
                loader: ['css-loader?minimize', 'sass-loader?minimize']
            })
          },
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                loader: 'url-loader',
                include: APP_PATH,
                query: {
                    limit: 8192,
                    name: '../imgs/[name]-[hash:8].[ext]'
                }
            },
            {
                test: /\.(ico|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
                loader: 'file-loader',
                include: APP_PATH,
                query: {
                    name: '../fonts/[name]-[hash:8].[ext]',
                },
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
              "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
          }),
         //這個使用uglifyJs壓縮你的js代碼
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            output: {
                comments: false,  // remove all comments
            },
            compress: {
                warnings: false
            }
        }),
        new HtmlwebpackPlugin({
          title: 'react-ele-webapp',
          template: path.resolve(ROOT_PATH, 'publish.html'),
          filename: 'index.html',
          // chunks: ['app', 'vendors'],
          minify: {
               caseSensitive: false,             //是否大小寫敏感
               collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled 
               collapseWhitespace: true         //是否去除空格
          },
          inject: 'body'
        }),
        new ExtractTextPlugin('css/[name]-[hash:8].css')
      ]
}