Question

我正在使用webpack并希望最小化css文件。这时它是2.25MB。我找到了这个optimize-css-assets-webpack-plugin插件，但它没有帮助，我的css文件大小相同。这是我的设置

 $db = new mysqli('localhost','root','','geo'); 

// Each value is a placeholder

$sql = "UPDATE file_contents SET Origin_URL = CONCAT('https://www.google.com/maps/dir/', ?, ',' ?, '/', ?, ',', ?) WHERE Sl = 1 LIMIT 6";

$stmt = $db ->prepare($sql);

// First parameter should correspond to number and types of your arguments
// You have 5, first four are strings, fifth is a number, so "ssssd"

$stmt->bind_param($OriginLatId,$OriginLongId,$DestinationLatId,$DestinationLongId);

$stmt->execute();

这是prod配置，它需要通用的配置文件。这是

'use strict';    
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackCommon = require('./webpack-common.config');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(webpackCommon, {
   devtool: 'none',
   plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
         /\.js$/,
         beautify: false,
         comments: false,
         compress: {
            unused: true,
            dead_code: true,
            warnings: false,
            screw_ie8: true
         }
      }),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production'),
         '__DEV__': false
      }),
      new webpack.optimize.CommonsChunkPlugin({
         minChunks: 2,
         maxChunks: 15,
         minChunkSize: 10000,
         name: 'vendor'
      }),
      new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.scss$/g,
         cssProcessor: require('cssnano'),
         cssProcessorOptions: { discardComments: { removeAll: true } },
         canPrint: true
      })
   ]
});

你看我在我的应用程序中使用sass。也许这就是为什么它不会减小尺寸的原因。

解决！实际上我有字体，他们被转换并嵌入到css文件中。这就是为什么压缩这么大的事件（2.25mb）。顺便说一句，我发现这个解决方案限制嵌入的最大尺寸

'use strict';

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

module.exports = {
   entry: {
      main: './src/main.js',
   },
   output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../../PashaGraph/WebClient/public')
   },
   watch: true,
   watchOptions: {
      aggregateTimeout: 100
   },
   plugins: [
      new ExtractTextPlugin("[name].css")
   ],
   module: {
      loaders: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
         },
         {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
         },
         {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css-loader?minimize!sourceMap')
         },
         {
            test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
            exclude: /node_modules/,
            loader: 'url-loader'
         }
      ]
   },
   resolve: {
      extensions: ['', '.js', '.jsx']
   }
};

Answer 1

只需使用-p选项运行webpack。它将为具有非常高压缩的生产而构建。

webpack -p

此外，您可能需要将Node_Environment设置为production，否则最终版本将在浏览器的控制台中显示一些警告消息。

Answer 2

不要在生产代码中使用源地图。删除!sourceMap。

如何使用webpack最小化我的css文件

2 个答案: