美文网首页
webpack-code-splitting

webpack-code-splitting

作者: summer_味道制造 | 来源:发表于2018-05-20 22:34 被阅读0次

在webpack中配置

1.CommonsChunkPlugin

 new webpack.optimize.CommonsChunkPlugin({
      name: 'commons',
      minChunks: ({ resource }) => (
        resource &&
        resource.indexOf('node_modules') >= 0 &&
        resource.match(/\.js$/)
      ),
    }),

2.ExtractTextPlugin

{
            test: /\.(scss|sass|css)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: require.resolve('style-loader'),
                  use: [
                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },
                    require.resolve('sass-loader'),
                    {
                      loader: require.resolve('postcss-loader'),
                      options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                          require('postcss-flexbugs-fixes'),
                          autoprefixer({
                            browsers: [
                              '>1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                          }),
                        ],
                      },
                    },
                  ],
                },
                extractTextPluginOptions
              )
            ),
            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
          },
 new ExtractTextPlugin({
      filename: "by[hash:8].css", 
      allChunks: true, (使用CommonsChunkPlugin,必须为true)
    }),

3.React Loadable

相关文章

网友评论

      本文标题:webpack-code-splitting

      本文链接:https://www.haomeiwen.com/subject/kecxjftx.html