javascript - 防止在 react 中显示原始 HTML

Question

有没有办法在 React.js 中防止在 CSS 样式表完全加载之前显示原始 HTML。我正在使用 Webpack、Semantic-UI( react 版本)和 React.js。

React 中有 ng-cloak (angular) 的等价物吗？

这是我的 webpack 配置文件的内容:

const webpack = require('webpack')
const ManifestPlugin = require('webpack-manifest-plugin')

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const DEBUG = process.env.NODE_ENV !== 'production'

const plugins = [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
  })
]
const assetsDir = process.env.ASSETS_DIR
const assetMapFile = process.env.ASSETS_MAP_FILE
const outputFile = DEBUG ? '[name].js' : '[name].[chunkhash].js'

if (!DEBUG) {
  plugins.push(new ManifestPlugin({
    fileName: assetMapFile
  }))
  plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true }))
}

const config = {
  entry: {
    bundle: ['babel-polyfill', './src/client/index.jsx']
  },
  module: {
    noParse: [],
    loaders: [
      { test: /\.json$/, loader: 'json' },
      { test: /\.css$/, loader: 'style!css' },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
        query: {
          cacheDirectory: DEBUG
        }
      },
      {test:/.svg$/,loader:'url-loader',query:{mimetype:'image/svg+xml',
      name:'/semantic/themes/default/assets/fonts/icons.svg'}},
      {test:/.woff$/,loader:'url-loader',query:{mimetype:'application/font-woff',
      name:'/semantic/themes/default/assets/fonts/icons.woff'}},
      {test:/.woff2$/,loader:'url-loader',query:{mimetype:'application/font-woff2',
      name:'/semantic/themes/default/assets/fonts/icons.woff2'}},
      {test:/.[ot]tf$/,loader:'url-loader',query:{mimetype:'application/octet-stream',
      name:'/semantic/themes/default/assets/fonts/icons.ttf'}},
      {test:/.eot$/,loader:'url-loader',query:{mimetype:'application/vnd.ms-fontobject',
      name:'/semantic/themes/default/assets/fonts/icons.eot'}},
      { test: /\.png/, loader: "url-loader?limit=100000&minetype=image/png" },
      { test: /\.jpg/, loader: "file-loader" }
    ]
  },
  node: {
    fs: "empty"
  },
  resolve: {
    alias: {
      "semantic-ui" : path.resolve( __dirname, "../semantic/dist/semantic.min.css")
    },
    extensions: ['', '.js', '.jsx', ".css"]
  },
  plugins,
  output: {
    filename: outputFile,
    path: DEBUG ? '/' : assetsDir,
    publicPath: '/assets/'
  }
}

if (DEBUG) {
  config.devtool = '#inline-source-map'
} else if (process.env.NODE_ENV === 'production') {
  config.devtool = 'source-map'
}

module.exports = config

当我尝试从我的组件加载我的 css 时出现此错误:

Cannot find module '/semantic/dist/semantic.min.css' 

并且模块存在。我在没有 Webpack 的情况下尝试了完全相同的配置，并且从组件导入工作正常。

Answer 1

这不是生产部署的正确设置。

默认情况下，Webpack 将您的 CSS 转换为在页面中注入(inject) CSS 标签的 Javascript 代码。这允许热 CSS 重新加载。显然，它仅适用于开发环境。您应该在开发中使用此默认行为，不应该在生产中使用它。

在生产中，您需要构建一个单独的 CSS 文件并使用 <style> 正常加载它在您的生产 HTML 代码中标记。要告诉 Webpack 将其提取到文件中，请使用 ExtractTextPlugin ，您的代码需要但从不使用。

您应该维护两个 Webpack 配置文件，一个用于不提取文本的开发(并且不缩小/丑化等)，另一个用于生产，它正确地缩小、散列名称、提取文本等。