webpack+react+antd脚手架优化

在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化。

优化类目

  • 样式分离
  • 第三方资源分离
  • 区分开发环境
  • 热更新
  • 提取公共代码

1. CSS分离

npm install extract-text-webpack-plugin -D

webpack.config.js

将css、less、sass文件单独从打包文件中分离

+ let cssExtract = new ExtractTextWebpackPlugin({
+    filename: 'css.css',
+    allChunks: true
+ });
+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')
+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

在webpack.config.js中单独添加规则,

  • test:匹配处理文件的扩展名的正则表达式
  • include/exclude手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
{
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: "style-loader",
        use: ['css-loader?minimize','postcss-loader'],
        publicPath: "/dist"
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
{
    test: /\.scss$/,
    use: sassExtract.extract({
        fallback: "style-loader",
        use: ["css-loader?minimize","sass-loader"],
        publicPath: "/dist"
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
{
    test: /\.less$/,
    loader: lessExtract.extract({
        use: ["css-loader?minimize", "less-loader"]
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},

然后运行webpack命令时报错

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

研究得出结论:webpack升级到v4然而响应的插件没有升级的原故。

解决方法:安装指定版本的依赖

"html-webpack-plugin": "^3.0.4"
"extract-text-webpack-plugin": "^4.0.0-beta.0"

resolve

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
    //引入模块的时候,可以不用扩展名
    extensions: [".js", ".less", ".json"],
    alias: {//别名
        "bootstrap": "bootstrap/dist/css/bootstrap.css"
    }
}

监听文件修改

webpack模式下使用,webpack-dev-server模式不用,可以将watch改为false

watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高
    poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次
}

提取公共代码

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

分离react react-dom ant公共代码

  • 方法一:externals

在页面上引入第三方资源库,然后使用externals防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。



externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }
  • 方法二:DLL

DLL在上篇文章中写过,但是打包后一直出现

image

后来才发现是页面上没有引入资源。。。。(我一直以为会webpack自动生成在页面上....)

在index.html文件中引入

    

分离成功!上代码

webpack.base.js

var path = require('path');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')

let cssExtract = new ExtractTextWebpackPlugin({
    filename: 'css.css',
    allChunks: true
});
let sassExtract = new ExtractTextWebpackPlugin('sass.css')
let lessExtract = new ExtractTextWebpackPlugin('less.css')

module.exports = {
    entry:'./src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.[hash:8].js',
        publicPath: ''
    },
    resolve: {
        //引入模块的时候,可以不用扩展名
        extensions: [".js", ".less", ".json"],
        alias: {//别名
            "bootstrap": "bootstrap/dist/css/bootstrap.css"
        },
        modules: [path.resolve(__dirname, 'node_modules')]
    },
/*    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
        // 提出ant design的公共资源
        //'antd': 'antd',
    },*/
    devtool: 'source-map',
    devServer: {
        contentBase:path.resolve(__dirname,'dist'),
        publicPath: '/',
        port: 8080,
        hot:true,
        compress:true,
        historyApiFallback: true,
        inline: true
    },
    watch: false, //只有在开启监听模式时,watchOptions才有意义
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高
        poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use: {
                    loader:'babel-loader',
                    options: {
                        presets: ['env','es2015', 'react'],
                    }
                },
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.css$/,
                use: cssExtract.extract({
                    fallback: "style-loader",
                    use: ['css-loader?minimize','postcss-loader'],
                    publicPath: "/dist"
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.scss$/,
                use: sassExtract.extract({
                    fallback: "style-loader",
                    use: ["css-loader?minimize","sass-loader"],
                    publicPath: "/dist"
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.less$/,
                loader: lessExtract.extract({
                    use: ["css-loader?minimize", "less-loader"]
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test: /\.(html|htm)/,
                use: 'html-withimg-loader'
            },
            {
                test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
                use: {
                    loader:'url-loader',
                    options:{
                        limit: 5 * 1024,
                        //指定拷贝文件的输出目录
                        outputPath: 'images/'
                    }
                }
            }
        ]
    },
    plugins: [
        //定义环境变量
        new webpack.DefinePlugin({
            __development__: JSON.stringify(process.env.NODE_ENV)
        }),
        new CleanWebpackPlugin(['dist']),
        cssExtract,
        lessExtract,
        sassExtract,
        new HtmlWebpackPlugin({
            title: 'React Biolerplate by YuanYuan',
            template: './src/index.html',
            filename: `index.html`,
            hash: true
        }),
        new webpack.DllReferencePlugin({
            manifest: path.join(__dirname, 'vendor', 'react.manifest.json')
        }),
        new CopyWebpackPlugin([{
            from: path.join(__dirname,'vendor'),//静态资源目录源地址
            to:'./vendor' //目标地址,相对于output的path目录
        }]),
/*        new webpack.optimize.CommonsChunkPlugin({
            name: 'common' // 指定公共 bundle 的名称。
    +     })*/
        new webpack.HotModuleReplacementPlugin(), // 热替换插件
        new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字
    ]
};

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//用来合并配置文件
const base = require('./webpack.base');
let other = '';

//console.log(process.env.NODE_ENV )
if (process.env.NODE_ENV == 'development') {
    other = require('./webpack.dev.config');
} else {
    other = require('./webpack.prod.config');
}
//console.log(merge(base, other));

module.exports = merge(base, other);

webpack.prod.config.js

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

module.exports = {
    output: {
        filename: 'bundle.min.js',
    },
    plugins: [
        new UglifyJSPlugin({sourceMap: true})
    ]
}

原脚手架地址

image

优化后手架地址

image

打包速度优化,打包文件细化,改造成功~

觉得好玩就关注一下欢迎大家收藏写评论~~

你可能感兴趣的:(webpack+react+antd脚手架优化)