Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/www.xcondor.cn/usr/plugins/AMP/Action.php on line 381

Warning: getimagesize(): Filename cannot be empty in /www/wwwroot/www.xcondor.cn/usr/plugins/AMP/Action.php on line 469
Webpack 构建性能优化

沙漠里的小蜜蜂

Webpack 构建性能优化


1.关闭source-map选项 【压缩构建文件大小,避免生成调试文件,只针对线上环境】
2. HappyPack 配置附配置 :

const HappyPack = require('happypack');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module: {
        noParse: [/react\.min\.js$/, /moment\.min\.js$/],
        rules: [
            {
                test: /\.(js)$/,
                use: {
                    loader: "babel-loader?cacheDirectory",
                    options: {
                        presets: [
                            "es2015", "react", "stage-0"
                        ]
                    }
                },
                exclude: /node_modules/,
            },
            {
                test: /\.(less|css)$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['happypack/loader?id=2']
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                loader: 'url-loader?limit=8192&name=images/[name].[ext]&publicPath=../'
            }
        ]
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/[name].js'
        }),
        new HappyPack({
            id: "1",
            threads: 8,
            loaders: ['babel-loader?cacheDirectory=true&presets[]=react,presets[]=es2015,presets[]=stage-0'],
            verbose: true
        }),
        new HappyPack({
            id: "2",
            threads: 8,
            loaders: ["css-loader?modules=false&sourceMap=false&minimize=true", "autoprefixer-loader?browsers=last 10 versions", "less-loader"],
            verbose: true
        }),
]

3. 通过 module.noParse 忽略文件 上面有配置

module.exports = {
  module: {
    // 独完整的 `react.min.js` 文件就没有采用模块化,忽略对 `react.min.js` 文件的递归解析处理
    noParse: [/react\.min\.js$/],
  },
};

4.通过 resolve.alias 映射文件

module.exports = {
  resolve: {
    // 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件,
    // 减少耗时的递归解析操作
    alias: {
      'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
    }
  },
};

5. 缩小 resolve.modules 的范围

module.exports = {
            resolve: {
                // 使用绝对路径指明第三方模块存放的位置,以减少搜索步骤
                // 其中 __dirname 表示当前工作目录,也就是项目根目录
                modules: [path.resolve(__dirname, 'node_modules')]
         },
};

6.缩小 Loader 的命中范围

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/,提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果,通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};

7.缩小 resolve.extensions 的数量

module.exports = {
  resolve: {
    // 尽可能的减少后缀尝试的可能性
    extensions: ['js'],
  },
};

8.?使用 DllPlugin 配置过于繁杂,未使用。其他亲测有效

当前页面是本站的「Baidu MIP」版。查看和发表评论请点击:完整版 »

因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。