zoukankan      html  css  js  c++  java
  • Typescript + React-Router + Webpack 实现按需打包/加载

    之前说完从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    现在我们来看看如何根据在这个环境的基础上配置按需加载。如果Redux也没有关系,有React-Router就足够了。

    本来以为React的按需打包已经有很成熟的方案了,但是没想到网上还是没有一个基于typescript的教程,这让typescript开发者情何以堪。

    首先放弃使用require.ensure,因为@types/node中没有定义require的ensure,就算重写了node的index.d.ts,也会报一个warning,并且不会起作用(可能是我写错了,但是我按别人的教程来写确实没有作用)。

    然后放弃使用es6的import,因为我的项目内集成了antd,如果使用import的话,必须在tsconfig.js中设置models:'commonjs',但是我antd使用按需加载必须使用models:'es2015',并且也还是不能使用(同上)。

    所以这里我们采用bundle-loader,并且这篇教程不会介绍bundle的一些使用方式,因为我自己也没摸很透。

    安装依赖

    npm i -D bundle-loader@0.5.5

    修改routes.tsx中的代码

    import * as React from 'react';
    import { Route, IndexRoute } from 'react-router';
    import * as Hello from './containers/Hello';
    
    function lazyLoadComponent(lazyModule: any): any {
      return (location: any, cb: any) => {
        lazyModule((module: any) => cb(null, module.default));
      }
    }
    
    export default (
      <Route path="/">
        <IndexRoute getComponent={lazyLoadComponent(Hello)} />
        <Route path="/demo">
          <IndexRoute getComponent={lazyLoadComponent(Hello)} />
        </Route>
      </Route>
    );

    其中Hello容器需要通过 * as 的方式引入,不然在编译好的代码中报错。

    然后之前toute上的component需要替换为getComponent,这是官方提供的按需加载的方法。
     
    代码修改完毕,我们接下来需要修改webpack中的output,在output属性中添加如下一条
    chunkFilename: '[name].[chunkhash:5].chunk.js'

    然后在module中添加如下规则

    { test: /src/containers(/.*).(tsx|ts)/, loader: "bundle-loader?lazy!ts-loader" }

    我这里是用的ts-loader,你也可以改成babel-loader,都行。

    注意test中匹配的是你在routes.tsx中引入的那个文件夹,一般来说都是containers。

    然后运行webpack或者webpack-dev-server

    可以看到我们多出来了一个chunk文件,代表我们的引用成功了。

     
  • 相关阅读:
    python lambda
    Java使用Graphics2D生成公章
    纯前端Html+JavaScript+canvas生成公章
    MySQL 大表优化方案,收藏了细看!
    【全干货】5分钟带你看懂 Docker!
    MySQL 分页优化中的 “ INNER JOIN方式优化分页算法 ” 到底在什么情况下会生效?...
    React-Native iOS真机调试(新版)
    React-Native iOS真机调试(新版)
    React-Native iOS真机调试(新版)
    React-Native iOS真机调试(新版)
  • 原文地址:https://www.cnblogs.com/baqiphp/p/7687542.html
Copyright © 2011-2022 走看看