Как лениво загружать компоненты в preact? - PullRequest
Новая
       14

Как лениво загружать компоненты в preact?

0 голосов
/ 12 марта 2020

Моя цель - получить два пакета при сборке: один для файла index.tsx, а другой для файла lazy.tsx. Я почти уверен, что мне где-то не хватает одного или двух вариантов.

GitHub MCVE - пример проекта

Файл src/index.tsx

import { render, h } from 'preact';

let a: any = null;
let b = 0;

const App = () => (
  <div>
    <button
      onClick={() => {
        import('./lazy').then(M => {
          console.log('LOADED COMPONENT');
          a = <M.default />;
          b++;
          render(<App></App>, document.body);
        });
      }}
    >
      test
    </button>
    {a} {b}
  </div>
);

render(<App></App>, document.body);

src/lazy.tsx

import { h, FunctionComponent } from 'preact';

console.log('LAZY');

interface LazyProps {}

const Lazy: FunctionComponent<LazyProps> = props => {
  const {} = props;

  return <div>LAZY LOADED COMPONENT</div>;
};

export default Lazy;

Конфигурация Webpack 

{
  entry: {
    index: `${__dirname}/src/index.tsx`
  },
  output: {
    path: resolve(__dirname, 'dist'),
    chunkFilename: '[name].[id].js',
    filename: '[name].bundle.js'
  },

  plugins: [new HtmlWebpackPlugin()],

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [/node_modules/]
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  optimization: {
    minimize: false
  }
}

Приведенный выше код работает без ошибок, но он не генерирует несколько пакетов, как ожидалось при разделении кода Webpack.

Редактировать: вот ссылка на рабочий пример проекта

1 Ответ

2 голосов
/ 12 марта 2020

Есть две проблемы с вашей конфигурацией.

Сначала с вашей конфигурацией TypeScript: 

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "react",
    "jsxFactory": "h",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },

  "include": [
    "src/**/*.tsx"
  ]
}

Два важных свойства, которые следует запомнить:

  1. module: 'ESNext'
  2. moduleResolution: 'node'

Как только вы установите module в ESNext, вы не сможете написать свою конфигурацию Webpack в TypeScript так, как она ожидает модуль должен быть commonjs. Поэтому измените его на обычный JS с общим JS форматом: 

const Configuration = require('webpack').Configuration;
const Dev = require('webpack-dev-server').Configuration;
const resolve = require('path').resolve;
const HtmlWebpackPlugin = require('html-webpack-plugin');


const config = {
  entry: {
    index: `${__dirname}/src/index.tsx`
  },
  output: {
    path: resolve(__dirname, 'dist'),
    chunkFilename: '[name].[id].js',
    filename: '[name].bundle.js'
  },

  plugins: [new HtmlWebpackPlugin()],

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: [/node_modules/]
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  optimization: {
    minimize: false
  }
};

module.exports = config;

Это должно решить вашу проблему.

...