search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1k forks source link

Webpack and Sass subtasks very slow (2+ minutes) #488

Closed BenGWeeks closed 7 years ago

BenGWeeks commented 7 years ago

Category

Expected or Desired Behavior

The project should compile quickly.

Observed Behavior

Webpack subtask is taking 2+ minutes to complete. Sass task is taking 1+ minute to complete (after gulp clean)

Steps to Reproduce

Here is my gulp file:

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
var path = require('path');
var process = require('process');
//var setWebpackPublicPath = require('set-webpack-public-path-loader');

// Ref: https://github.com/webpack/docs/wiki/configuration#outputpublicpath

// Ref: https://www.youtube.com/watch?v=Eecu7-oVXos&vl=en
/*
gulp.task('gulp-clean-css', function() {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: "ie8", processImport: false }))
    .pipe(gulp.dest('dist'));
});
*/

gulp.task('copyfonts', function() {
  console.log("Coping fonts ...");
  gulp.src('./dist/*.{ttf,woff,woff2,eof,svg}')
  .pipe(gulp.dest('./temp'));
});

gulp.task('copyimages', function() {
  console.log("Coping images ...");
  gulp.src('./dist/*.{png,jpg,jpeg,gif}')
  .pipe(gulp.dest('./temp'));
});

gulp.task('serve-all',['copyfonts', 'copyimages', 'serve'], function() {
  console.log("Fix to serve everything ... ");

});

build.configureWebpack.setConfig({
  additionalConfiguration: (config) => {
    var webpack = require('webpack');

    // Angular 2 fix, see: https://github.com/angular/angular/issues/10618
    // Remove the Microsoft-provided Uglify plugin
    // If you only want this to happen during a prod build, add the
    // following if statement:
    // if (build.getConfig().production) { ... }

    config.plugins.forEach((plugin) => {
      if (plugin instanceof webpack.optimize.UglifyJsPlugin) {
        var index = config.plugins.indexOf(plugin);
        console.log("BGW: Uglify plugin found (index = " + index + "), we will remove it and re-add it later.");
        config.plugins.splice(index, 1);
      }
      /*
        if (plugin instanceof webpack.LoaderOptionsPlugin) {
          var index = config.plugins.indexOf(plugin);
          console.log("BGW: LoaderOptionsPlugin found (index = " + index + "), we will remove it and re-add it later.");
          config.plugins.splice(index, 1);
      }*/
    });

    // Workaround for ng2, see: https://github.com/angular/material2/issues/1335#issuecomment-277157354
    console.log("BGW: Switch-off the html-loader minimization.");
    config.htmlLoader = {
      minimize: false, // workaround for ng2 (only works for Webpack v1!)
    }
    /*
    config.plugins.push(new webpack.LoaderOptionsPlugin({
            options : {
                htmlLoader : {
                    minimize : false
                }
            }
    }));
    */

    // Add our custom config plugin
    console.log("BGW: Switch-off the UglifyJsPlugin mangle.");
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: false,
    }));

    // Add JQuery plugin (required for Froala)
    console.log("BGW: Add JQuery plugin.");
    config.plugins.push(new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }));

    config.devtool = 'eval-source-map';
    //config.devtool = "val-cheap-module-source-map";
    //config.output.path = path.resolve('temp');
    //config.output.publicPath = '/';
    //config.output.assetsPublicPath = '/somewhere3';

    config.module.loaders.push([
      {
        test: /\.html$/,
        loader: "html-loader?-minimize",
        exclude: 'node_modules'
      }, // workaround for ng2
      //{ test: /\.html$/, loader: "html?interpolate=require&-minimize" }, // workaround for ng2
      // { test: /\.html$/, loader: "html-loader", query: { minimize: false } }, // workaround for ng2
      {
        test: /\.(jpg|png|gif|svg)([\?]?.*)$/,
        loader: 'file-loader',
        exclude: 'node_modules' // Speed up the build
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff",
        exclude: 'node_modules' // Speed up the build
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff",
        exclude: 'node_modules' // Speed up the build
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream",
        exclude: 'node_modules' // Speed up the build
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader",
        exclude: 'node_modules' // Speed up the build
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml",
        exclude: 'node_modules' // Speed up the build
      }, {
        test: /\.(html)([\?]?.*)$/,
        loader: "html-loader?-minimize",
        exclude: 'node_modules' // Speed up the build
      }
    ]);

    // Don't parse some dependencies to speed up build ...
    config.module.noParse = [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]

    //config.output.pathinfo = true;

    return config;
  }
});

build.assetsPublicPath = '/somewhere2';

build.initialize(gulp);
patmill commented 7 years ago

So, standard diagnosis stuff - what happens if you have a standard project without customizations? Does it have a similar time? If you look at perf counters during your build, is it high CPU? High Disk? etc. Can you be doing a bunch of extra disk IO that is getting hung up behind a virus scanner and such?

BenGWeeks commented 7 years ago

Hi @patmill - apologies for the delay. Checked all the items PC wise. I think I have a lot of dependencies which I am now trying to stop being bundled. I am doing the following:

"externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
    "jquery":"node_modules/jquery/dist/jquery.min.js",
    "@angular/core": "node_modules/@angular/core/bundles/core.umd.min.js",
    "@angular/common": "node_modules/@angular/common/bundles/common.umd.min.js",
    "@angular/compiler": "node_modules/@angular/compiler/bundles/compiler.umd.min.js",
    "@angular/platform-browser": "node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js",
    "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js",
    "@angular/http": "node_modules/@angular/http/bundles/http.umd.min.js",
    "@angular/router": "node_modules/@angular/router/bundles/router.umd.min.js",
    "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.min.js",
    "@progress/kendo-angular-buttons": "node_modules/@progress/kendo-angular-buttons/dist/cdn/js/kendo-angular-buttons.js",
    "@progress/kendo-angular-dialog": "node_modules/@progress/kendo-angular-dialog/dist/cdn/js/kendo-angular-dialog.js",
    "@progress/kendo-angular-dropdowns": "node_modules/@progress/kendo-angular-dropdowns/dist/cdn/js/kendo-angular-dropdowns.js",
    "@progress/kendo-angular-grid": "node_modules/@progress/kendo-angular-grid/dist/cdn/js/kendo-angular-grid.js",
    "@progress/kendo-angular-inputs": "node_modules/@progress/kendo-angular-inputs/dist/cdn/js/kendo-angular-inputs.js",
    "@progress/kendo-angular-intl": "node_modules/@progress/kendo-angular-intl/dist/cdn/js/kendo-angular-intl.js",
    "@progress/kendo-angular-l10n": "node_modules/@progress/kendo-angular-l10n/dist/cdn/js/kendo-angular-l10n.js",
    "@progress/kendo-angular-layout": "node_modules/@progress/kendo-angular-layout/dist/cdn/js/kendo-angular-layout.js",
    "@progress/kendo-angular-popup": "node_modules/@progress/kendo-angular-popup/dist/cdn/js/kendo-angular-popup.js",
    "@progress/kendo-angular-upload": "node_modules/@progress/kendo-angular-upload/dist/cdn/js/kendo-angular-upload.js",
    "@progress/kendo-data-query": "node_modules/@progress/kendo-data-query/dist/cdn/js/kendo-data-query.js",
    "@progress/kendo-theme-default": "node_modules/@progress/kendo-data-query/dist/cdn/js/kendo-theme-default.js",
    "sp-pnp-js": "node_modules/sp-pnp-js/dist/pnp.min.js"
  }

It's certainly reduced the build time from 2+ minutes, to around 45 seconds now. But getting the following issue:

https://github.com/SharePoint/sp-dev-docs/issues/516

iclanton commented 7 years ago

Closing this issue in favor of #516.

msft-github-bot commented 4 years ago

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues