通过 React 延迟导入和 Webpack 不会发生代码拆分

Question

 //webpack dev const common = require("./webpack.common"); const merge = require("webpack-merge"); const globImporter = require('node-sass-glob-importer'); module.exports = merge(common, { mode: "development", module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')({ 'overrideBrowserslist': ['> 1%', 'last 2 versions'] })], } }, { loader: 'sass-loader', options: { sassOptions: { importer: globImporter() } } }] }, ] }, devServer: { // contentBase: path.join(__dirname, 'dist'), historyApiFallback: true, port: 8081 } });

 //webpack prod const common = require("./webpack.common"); const path = require("path"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const merge = require("webpack-merge"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = merge(common, { mode: "production", output: { filename: "main.[contenthash].js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')({ 'overrideBrowserslist': ['> 1%', 'last 2 versions'] })], } }, { loader: 'sass-loader', options: { sassOptions: { importer: globImporter() } } }] } ] }, plugins: [new MiniCssExtractPlugin({ filename: "./src/css/[name].[contentHash].css" }, ), new CleanWebpackPlugin()] })

 // webpack common const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry:"./src/index.tsx", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: [".ts", ".tsx",".js", ".jsx"] }, module:{ rules:[ { test: /\.ts(x?)$/, exclude: /node_modules/, use: [ { loader: "ts-loader" } ] }, { test:/\html$/, use:["html-loader"] }, { test:/\.(svg|png|jpe?g|gif)$/i, use:{ loader:"file-loader", options:{ name:"[name].[hash].[ext]", outputPath:"images" } } } ] }, // externals: { // "react": "React", // "react-dom": "ReactDOM" // }, plugins:[new HTMLWebpackPlugin({ template:"./src/index.html" })] }

Code splitting not happening via React lazy import,and Webpack

I want to do code splitting with React Suspense and Lazy imports, I don't know what is missing because separate chunk is not getting created for my dynamically import component

Please anyone help I am using webpack 4 and React version 16.9

Getting below message warning console

---

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (533 KiB)./src/css/main.000e3971ce67d214e0d7.css main.5877aa0d0c3e45fb034f.js

WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

---

Answer 1

In tsconfig.json set "module": "esnext"