spfx-fast-serve
Advanced tools
spfx-fast-serve - npm Package Compare versions
Comparing version 1.10.0 to 1.10.1
| { | ||
| "name": "spfx-fast-serve", | ||
| "version": "1.10.0", | ||
| "version": "1.10.1", | ||
| "author": "Sergei Sergeev (https://github.com/s-KaiNet)", | ||
@@ -5,0 +5,0 @@ "description": "Improve your SharePoint Framework development by speeding up 'serve' command", |
@@ -5,2 +5,15 @@ # SPFx Fast Serve Tool | ||
| --- | ||
| Compare "refresh" time (the time needed to compile your project when you change a file and start refreshing a page in a browser): | ||
| > NOTE: The actual time depends on the environment, hardware, but at least you can see the difference | ||
| | | gulp serve | spfx-fast-serve | | ||
| | ----------------------------------------------------------------------------------- | ---------- | --------------- | | ||
| | Default "Hello World" <br> React web part | 3-5 sec | 0.3-0.5 sec | | ||
| | [PnP Modern Search solution](https://github.com/microsoft-search/pnp-modern-search) | 28-34 sec | 2-4 sec | | ||
| | [SP Starter Kit solution](https://github.com/SharePoint/sp-starter-kit) (v1) | 40-50 sec | 2-3 sec | | ||
| Read more info in my [blog post here](https://spblog.net/post/2020/03/24/spfx-overclockers-or-how-significantly-speed-up-the-gulp-serve-command). | ||
| ## How to use | ||
@@ -12,24 +25,14 @@ | ||
| 4. Run `npm install` | ||
| 5. Run `npm run serve` and enjoy incredible speed of `serve` command! | ||
| 5. Run `npm run serve` and enjoy the incredible speed of `serve` command! | ||
| Compare "refresh" time (the time needed to compile your project when you change a file and start refreshing a page in a browser): | ||
| > NOTE: The actual time depends on the environment, hardware, but at least you can see the difference | ||
| | | gulp serve | spfx-fast-serve | | ||
| | ----------------------------------------- | ---------- | --------------- | | ||
| | Default "Hello World" <br> React web part | 3-5 sec | 0.3-0.5 sec | | ||
| | PnP Modern Search solution | 28-34 sec | 2-4 sec | | ||
| | SP Starter Kit solution (v1) | 40-50 sec | 2-3 sec | | ||
| Read more info in my blog post here [TO BE ADDED]. | ||
| ## Which SharePoint Framework versions are supported | ||
| The latest version of the tool supports the latests version of SharePoint Framework. If you have a need to run it for earlier versions, use `npx` tool: | ||
| If you develop for SharePoint Online, simply use the latests version of the tool. | ||
| If you target is SharePoint 2019 (which uses SharePoint Framework 1.4.1), then run specific `spfx-fast-serve` version with SP 2019 support: | ||
| ```bash | ||
| npx -p spfx-fast-serve@1.4.1 | ||
| npx spfx-fast-serve@1.4.x | ||
| ``` | ||
| The tool was tested with current SPFx 1.10 and SPFx 1.4.1 (SharePoint 2019). | ||
| SharePoint 2016 is **NOT** supported. | ||
@@ -42,4 +45,10 @@ ## How it works | ||
| - incremental TypeScript compilation when a file is being changed. It means only necessary files are compiled, not everything. | ||
| - asynchronous type checking and linting (via `tslint`). | ||
| - asynchronous type checking and linting. | ||
| Also | ||
| - supports local and hosted workbench | ||
| - live reloading (for hosted workbench as well) | ||
| - doesn't mess up your default SPFx build. If you have troubles, simply switch back to regular `gulp serve` | ||
| With `spfx-fast-serve` you will be able to significantly reduce the time from code change to a page refresh in a browser (a few times faster than the default `gulp serve` command). | ||
@@ -49,11 +58,12 @@ | ||
| - you may loose formatting in your `package.json` and `gulpfile.js` because the tool doesn't respect original file formatting (tabs vs whitespace, size, etc.). You have to fix it afterwards, if needed. | ||
| - every time you introduce a new dependency for your solution, you should re-run `npm run serve` command, so that it picks up all new dependencies correctly. | ||
| - you may loose formatting in your `package.json` and `gulpfile.js` because the tool doesn't respect original file formatting (tabs vs whitespace, size, etc.). You have to fix it afterwards, if needed. | ||
| - every time you introduce a new dependency for your solution, you should re-run `npm run serve` command, so that it picks up all new dependencies correctly. | ||
| - when you modify localization .js files, live reload doesn't work. You should reload manually | ||
| - if you use custom webpack loaders or other webpack modifications via `build.configureWebpack.mergeConfig` feature, you should manually apply them to `webpack.js` file created by the cli to make everything work | ||
| ## Manual merge warning | ||
| As part of the steps, `spfx-fast-serve` modifies your `gulpfile.js`. In most cases it smoothly merges all required stuff. However, in case if you use `build.configureWebpack.mergeConfig` in your code, the tool is unable to perform merge correctly. In that case you should do manual merge. | ||
| As part of the steps, `spfx-fast-serve` modifies your `gulpfile.js`. In most cases it smoothly merges all required stuff. However, in case if you use `build.configureWebpack.mergeConfig` in your code, the tool is unable to perform merge correctly. In that case you should do manual merge. | ||
| Simply locate you code with `build.configureWebpack.mergeConfig` and insert the line | ||
| Simply locate you code with `build.configureWebpack.mergeConfig` and insert the line | ||
@@ -63,5 +73,6 @@ ```javascript | ||
| ``` | ||
| at the bigining of your `additionalConfiguration` callback method. | ||
| For example: | ||
| at the beginning of your `additionalConfiguration` callback method. | ||
| For example: | ||
| ```javascript | ||
@@ -85,2 +96,2 @@ build.configureWebpack.mergeConfig({ | ||
| --- | ||
| Please use [issues](https://github.com/s-KaiNet/spfx-fast-serve/issues) for questions, suggestions and, of course, issues. | ||
| Please use [issues](https://github.com/s-KaiNet/spfx-fast-serve/issues) for questions, suggestions and, of course, issues. |
@@ -0,0 +0,0 @@ #!/usr/bin/env node |
@@ -11,3 +11,4 @@ { | ||
| "webpack-cli": "3.3.11", | ||
| "webpack-dev-server": "3.10.3" | ||
| "webpack-dev-server": "3.10.3", | ||
| "del": "5.1.0" | ||
| } |
@@ -0,0 +0,0 @@ const argv = build.rig.getYargs().argv; |
@@ -0,0 +0,0 @@ const argv = build.rig.getYargs().argv; |
@@ -7,2 +7,3 @@ const path = require('path'); | ||
| const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); | ||
| const del = require('del'); | ||
| const host = "https://localhost:4321"; | ||
@@ -147,2 +148,4 @@ | ||
| const createConfig = function () { | ||
| // remove old css module TypeScript definitions: | ||
| del.sync(["src/**/*.module.scss.ts"]); | ||
@@ -149,0 +152,0 @@ // we need only 'externals', 'output' and 'entry' from the original webpack config |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.29%
19221
- Lines of code
- increased by1.22%
332
- Number of lines in readme file
- increased by15%
92
No dependency changes