Блог

Я пытаюсь оптимизировать быстродействие моего сайта, разделяя код с помощью webpack, в частности, мои узловые модули, при этом каждый модуль разделяется на свой собственный пакет.

Разделение пакетов отлично работает для нашей собственной базы кода, но когда я разделяю модули узла, браузер показывает пустую страницу без ошибок. Основной пакет успешно извлечен, но, похоже, не выполняется должным образом.

Это мой конфигурационный файл webpack:

 var webpack = require('webpack');
var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'static/public/js');
var APP_DIR = path.resolve(__dirname, 'static/js');
var CSS_DIR = path.resolve(APP_DIR, 'css');

var config_function = function(env){
  var config = {
    mode: env amp;amp; env.prod ? 'production':'development',
    entry: ['babel-polyfill', APP_DIR   '/index.js'],
    output: {
      path: BUILD_DIR,
      filename: env amp;amp; env.prod ? '[name].bundle.min.js' : '[name].bundle.js',
      publicPath: '/static/js/'
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups:{
                vendor: {
                    test: /[\/]node_modules[\/]/,
                    name(module) {
                        const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
                        return `npm.${packageName.replace('@', '')}`;
                    },
                }
            }
        }
    },
    plugins: env amp;amp; env.prod ? [
        new webpack.IgnorePlugin(/^./locale$/, /moment$/),
        new webpack.DefinePlugin({
             'process.env.NODE_ENV': '"production"'
         }),
        new UglifyJSPlugin({uglifyOptions:{
            ecma: 5,
            mangle: {
                safari10: true
            },
            warnings: false,
            screw_ie8: true,
            compress: true,
        }}),
        new CompressionPlugin({
            algorithm: 'gzip',
            minRatio: 1})
    ]: [
        new BundleAnalyzerPlugin(),
    ],
    module: {
      rules: [{
        test: /.jsx?/,
        include: [APP_DIR, /node_modules/snakecase-keys/, /node_modules/redux-api-middleware/,/node_modules/map-obj/, /node_modules/hare-niemeyer/, /node_modules/round-to/, /node_modules/styled-components/],
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2'], //, 'react-hmre']
          plugins: ['recharts']
        }
      }, {
        test: /.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /.json$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      }, {
        test: /.less$/,
        include: CSS_DIR,
        loaders: ['style-loader', 'css-loader', 'less-loader']
      }, {
          test: /.css$/,
          loaders: ['style-loader', 'css-loader']
      }, {
          test: /.(png|jpg)$/,
          loader: 'url-loader'
      },
    ]
    }
  };

  return config;
}

module.exports = config_function;
  

Разделение кода выглядит именно так, как я ожидал: у каждого пакета npm есть свой собственный пакет, а остальная часть нашего собственного кода также успешно разделена. Однако он просто не выполняется должным образом (т. Е. Пустая страница без ошибок).

Я неправильно понял технологию и подумал, что runtime bundle отвечает за динамическую выборку отдельных модулей npm.

Пришлось извлекать каждый отдельный модуль npm с помощью скрипта в моем index.html файл, чтобы заставить его работать.