Twitter bootstrap 为什么要用webpack导入引导css,而不仅仅是链接到它?
我一直在学习用于单页应用程序的webpack 其中一个例子是使用:Twitter bootstrap 为什么要用webpack导入引导css,而不仅仅是链接到它?,twitter-bootstrap,webpack,webpack-4,Twitter Bootstrap,Webpack,Webpack 4,我一直在学习用于单页应用程序的webpack 其中一个例子是使用: import 'bootstrap/dist/css/bootstrap.min.css'; 连同这样的加载程序: { test: /\.css$/, use: ['style-loader', 'css-loader'] } 这可以将引导css注入main.js,然后在运行时将其注入dom 好的。但是为什么呢?我不认为这有什么好处,只是有一个正常的链接 代码的另一个方面是,这正在增加捆绑包的大小(我的应用程序
import 'bootstrap/dist/css/bootstrap.min.css';
连同这样的加载程序:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
这可以将引导css注入main.js,然后在运行时将其注入dom
好的。但是为什么呢?我不认为这有什么好处,只是有一个正常的链接
代码的另一个方面是,这正在增加捆绑包的大小(我的应用程序捆绑包已经超过5兆),这只会增加启动时间,而不是使用CDN
我遗漏了什么吗
更新
我想我找到了答案:下一步是使用MiniCssExtractPlugin将导入的css提取到css文件中,如explained所示,当您有一个依赖项时,它不会有任何区别。但是,如果您有很多第三方库,您可以将它们打包并缩小为一个。当您的应用程序投入生产时,它将为您带来优势 此外,其他好处还包括将.scs转换为css web包配置示例
module.exports = {
mode: 'development',
entry: {
'main.app.bundle': ['main.ts', "./somestyle.css"]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
output: {
publicPath: '/dist/',
filename: '[id].js',
chunkFilename: "[name].js",
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
'exports-loader?module.exports.toString()',
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader',
]
},
{
// This plugin will allow us to use html templates when we get to the angularJS app
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
}
]
},
node: {
fs: 'empty'
},
resolve: {
modules: [
__dirname,
'node_modules',
],
extensions: [".ts", ".tsx", ".js"]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HashOutput({
validateOutput: false,
}),
new MiniCssExtractPlugin({
filename: 'application.bundle.css',
chunkFilename: '[name].css'
})
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};
如果你在webpack中使用引导css,我建议你使用一个额外的插件,比如PurifyCss,它可以让你“树化”所有你没有实际使用的引导类,从而减少你的包大小。加1作为示例-非常有用