美文网首页
webpack 优化

webpack 优化

作者: 编程之上 | 来源:发表于2016-12-29 10:09 被阅读39次

你可能注意到在引入 React JS 到你的项目之后,给你的应用重新合并会花费太多的时间。在开发环境中,最理想的是编译最多 200 到 800 毫秒的速度,取决于你在开发的应用。

注意!这个是设置一个压缩和发布的 React 版本,结果你可能会失去 propTypes 基础类型检查!

为了不让 Webpack 去遍历 React JS 及其所有依赖,你可以在开发中重写它的行为。

webpack.config.js

    var path = require('path');
    var node_modules = path.resolve(__dirname, 'node_modules');
    var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
    config = { 
        entry: [
            'webpack/hot/dev-server', 
            path.resolve(__dirname, 'app/main.js')
        ], 
        resolve: { 
            alias: { 'react': pathToReact } 
        }, 
        output: { 
            path: path.resolve(__dirname, 'build'), 
            filename: 'bundle.js', 
        }, 
        module: { 
            loaders: [{ test: /\.jsx?$/, loader: 'babel' }], 
            noParse: [pathToReact] 
        }
};
module.exports = config;

我们在配置中做了两件事:

每当 "react" 在代码中被引入,它会使用压缩后的 React JS 文件,而不是到 node_modules 中找。

每当 Webpack 尝试去解析那个压缩后的文件,我们阻止它,因为这不必要。

更多优化

相关文章

网友评论

      本文标题:webpack 优化

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